作为这个问题的标题sez：
如何从另一个HTML窗口更改1个HTML窗口的背景图像？
我有9个HTML窗口。
称他们为'HTMLWindow_0'＆amp; HTMLWindow_1'到'HTMLWindow_8'。
HTML Window1有一个背景图像和一组8个按钮。
每个按钮都会打开一个带有不同背景图像的新HTML窗口。
通过'HTMLWindow_8'将它们称为'HMTLWindow_1'。
换句话说，'HTMLWindow_0'上的Button-n创建'HTMLWindow_n'。
“HTMLWindow_0”上的一组按钮创建的每个HTML窗口都有一个与之关联的背景图像。
背景图片x与HTMLWindow_x相关联。
HTML＆amp; “HTMLWindow_0”的Javascript位于名为“HTMLWindow_0.html”的文件中。
“HTMLWindow_1”到“HTMLWindow_8”的HTML位于名为“HTMLWindow_x.html”的文件中。
用作HTML窗口1到8的背景的图像的文件路径名集存储在“HTMLWindow_0.html”文件中名为“Image_Array”的Javascript数组中。
HTMLWindow_0中按钮点击的HTML如下：
<div class="toc_button_01"><button onClick="changePage ('Toc 01', 2)"> </button></div>
<div class="toc_button_02"><button onClick="changePage ('Toc 02', 4)"> </button></div>
<div class="toc_button_03"><button onClick="changePage ('Toc 03', 5)"> </button></div>
<div class="toc_button_04"><button onClick="changePage ('Toc 04', 6)"> </button></div>
<div class="toc_button_05"><button onClick="changePage ('Toc 05', 7)"> </button></div>
<div class="toc_button_06"><button onClick="changePage ('Toc 06', 8)"> </button></div>
<div class="toc_button_07"><button onClick="changePage ('Toc 07', 9)"> </button></div>
<div class="toc_button_08"><button onClick="changePage ('Toc 08', 10)"> </button></div>
换句话说，单击任意8个按钮可激活名为“changepage”的JavaScript函数。
'changepage'看起来像这样：
function changePage (buttonName,
buttonNumber)
{
alert ( "We're in the 'changePage' function !"
+ "\n"
+ "We just clicked on the "
+ buttonName
+ " button !"
+ "\n"
+ "Button Number = "
+ buttonNumber
+ "\n"
+ "Current Page URL = "
+ Image_Array [buttonNumber]);
document.getElementById("image1").src = Image_Array [buttonNumber];
generatePageContent (buttonNumber);
} // End of function changePage ()
'changepage'轮流调用另一个名为'generatePageContent'的JavaScript函数。
'generatePageContent'是实际的JavaScript函数，它根据在“HTMLWindow_0”上按下的按钮创建新的HTML窗口1到8。
'generatePageContent'看起来像这样：
function generatePageContent (buttonNumber)
{
alert ( "We're in the 'generatePageContent' function !"
+ "\n"
+ "Button Number = "
+ buttonNumber
+ "\n"
+ "Current Page URL = "
+ Image_Array [buttonNumber]);
var newWindow = window.open (' HTMLWindow_x.html ',
'',
'width = 788, height = 632, left = 100, top = 200, toolbar = yes');
newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];
} // End of function generatePageContent ()
创建任何新的HTML窗口1到8都没有问题。
换句话说，行：
var newWindow = window.open (' HTMLWindow_x.html ',
'',
'width = 788, height = 632, left = 100, top = 200, toolbar = yes');
在Javascript函数中，'generatePageContent'将创建任何HTML窗口1到8，具体取决于在'HTMLWindow_0'上单击了哪个按钮1到8。
但行：
newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];
'generatePageContent'不起作用。
这是应该在创建的HTML窗口1到8中更改背景图像的行。
完全被忽略了。
有趣的是，在调用HTML窗口'HTMLWindow_0'中更改背景图像没有问题。
该行：
document.getElementById("image1").src = Image_Array [buttonNumber];
在Javascript函数'changepage'中处理这个问题。
所以，我猜实际的问题是：
为什么：
document.getElementById("image1").src = Image_Array [buttonNumber];
在Javascript函数'changepage'中更改'HTMLWindow_0'中的背景图片，但
newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];
在Javascript函数'generatePageContent'中，不会通过HTMLWindow_8更改任何'HTMLWindow_0'中的背景图像？
JavaScript函数'changePage'中的'image1'引用引用文件HTMLWindow_0中的以下HTML代码：
<div class="img1">
<img id = "image1"
src = "../BookListPages/ClearingThePath/CTP-02.tiff"
alt = "Clearing The Path ..."
width = "765"
height = "580"
border = "2"
/> <!-- End of img tag. -->
</div>
JavaScript函数'generatePageContent'中的'image2'引用引用文件HTMLWindow_x中的以下HTML代码：
<div class="img">
<img id = "image2"
src = "../BookListPages/NoSuchPageForThisBook.tif"
alt = "Clearing The Path ..."
width = "765"
height = "580"
border = "2"
/> <!-- End of img tag. -->
换句话说，简单地说，我正在尝试使用creatING窗口内的按钮从另一个HTML窗口内部创建一个HTML窗口，我想改变creatED HTML窗口的背景图像，具体取决于哪个按钮是点击创建窗口。
我错过了什么/搞砸了？
我为这篇文章的复杂性道歉但我想确保我已经清楚地解释了我正在尝试做什么，并且我提供了所有HTML和Javascript源代码来支持它是什么我我试图在这里做。
最后，我要提前感谢所有人，无论你有什么建议，帮助，参考和建议，我都可以解决这个问题。
答案 0 :(得分：1)
这就是我的开始。这很有效。
var newWindow = window.open('HTMLWindow_x.html', '', 'width = 788, height = 632, left = 100, top = 200, toolbar = yes');
setTimeout(function() {
window.focus();
newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];
}
, 2000); // I tend to use extreme values when bumping into issues like these.. just to see
使用setTimeout有点向我展示了这是一个“时机”问题。这让我觉得可能打开的窗口还没有加载..调试过程的下一步可能会让你意识到你应该使用newWindow.onload ..
这是一个完整的工作样本：
<强> html1.html
<html>
<head></head>
<body>
<div class="img">
<img id="image2" src= "0.png" alt= "Clearing The Path ..." width="765" height="580" border="2" />
</div>
</body>
</html>
<强> html0.html
<html>
<head>
<script>
function changePage(buttonName,
buttonNumber)
{
document.getElementById("image1").src = Image_Array [buttonNumber];
generatePageContent (buttonNumber);
}
function generatePageContent (buttonNumber)
{
try {
var newWindow = window.open (' html1.html ', 'someWindowName', 'width = 788, height = 632, left = 100, top = 200, toolbar = yes');
newWindow.onload = loadSecondWindow.apply(this, [buttonNumber, newWindow]);
}
catch(e)
{
// although IE throws a 'not implemented' exception here, it changes the image..
// does anyone know why?
}
}
function loadSecondWindow(buttonNumber, newWindow)
{
setTimeout(function() {
//window.focus();
newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];
}, 500); // I started with a timeout of 2000
}
var Image_Array = {};
Image_Array['0'] = '0.png';
Image_Array['1'] = '1.png';
function curry() {
if (!arguments.length) return this;
var __method = this, args = slice.call(arguments, 0);
return function() {
var a = merge(args, arguments);
return __method.apply(this, a);
}
}
</script>
</head>
<body>
<div class="toc_button_01">
<button onClick="changePage ('Toc 01', 1)"> open html1.html</button></div>
<div class="img1">
<img id = "image1"
src = "0.png"
alt = "Clearing The Path ..."
width = "765"
height = "580"
border = "2"
/> <!-- End of img tag. -->
</div>
</body>
</html>