javascript - 从父脚本访问预加载的图像以在子脚本中使用。如何？

Question

我正在尝试使用子窗口中的可单击链接来更新父窗口中的图像。我已经使用一个 javascript 文件在父窗口中预加载了图像。 “scriptss.js” 我的问题是我需要使用子脚本“scriptremote.js”访问父窗口的预加载图像，再次感谢所有 JS 帮助! JS(scriptss.js)

var newWindow = null;
window.onload = init;
var i = 0;
image_object = new Image();
myImages = new Array(); // declare array
myImages[0]="images/img1.jpg"  // load array
myImages[1]="images/img2.jpg" 
myImages[2]="images/img3.jpg"     
myImages[3]="images/img4.jpg"
myImages[4]="images/img5.jpg"
myImages[5]="images/img6.jpg"

这是父窗口的 HTML:

<img src="" width="200px" height="200px" id="myimage" name="myimage" /></img>

这是子窗口的 JS:

window.onload = init;

function init()
{
}

function first_image()
{
window.parent.image_object.src = myImages[3]; //Problem happens here I think
document.getElementById("myimage")window.parent.src = window.parent.image_object.src;

}

HTML 子窗口

<h1>My Remote</h1>
<a href="#" id="first" onclick="first_image()" >First Image</a>
</br>

Answer 1

在您的父窗口中，您实际上并未预加载图像。要预加载你应该这样做

myImages = new Array(); // declare array
myImages[0] = new Image()
myImages[0].src = "images/img1.jpg"
//etc...

现在您有了一个 Image 对象数组。

从你的子窗口(我假设是一个 iframe？)你可以引用这些对象并将 src 属性分配给父 DOM 中的图像，如下所示

window.parent.document.getElementById('myImage').src = window.parent.myImages[n].src;
// where n is the index of the image you want to display

如果您的子窗口是弹出窗口，则替换 parent与 opener 另外，您不需要 <img /> 的结束标签。 ，它会自动关闭