Javascript 如何从另一个HTML窗口更改一个HTML窗口的背景图像？

作为本问题的标题，经济特区：

如何从另一个HTML窗口更改一个HTML窗口的背景图像

我有9个HTML窗口

通过“HTMLWindow_8”将它们称为“HTMLWindow_0”和“HTMLWindow_1”

HTML Window1有一个背景图像和一组8个按钮

每个按钮都会打开一个具有不同背景图像的新HTML窗口

通过“HTMLWindow_8”称呼它们为“HMTLWindow_1”

换句话说，“HTMLWindow\u 0”上的按钮–n创建“HTMLWindow\u n”

“HTMLWindow_0”上的按钮集创建的每个HTML窗口都有一个与其关联的背景图像

背景图像x与HTMLWindow_x关联

“HTMLWindow_0”的HTML和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>

“changepage”依次调用另一个名为“generatePageContent”的JavaScript函数

“generatePageContent”是实际的JavaScript函数，它根据在“HTMLWindow_0”上按下的按钮创建新的HTML窗口1到8

“generatePageContent”如下所示：

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 ()

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');

newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];

在Javascript函数中，“generatePageContent”将创建任何HTML窗口1到8，具体取决于在“HTMLWindow_0”上单击的按钮1到8

然而，该行：

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];

在Javascript中，“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_0”到HTMLWindow_8”中的背景图像吗

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. -->

换句话说，简单地说，我正在尝试使用创建窗口中的按钮从另一个HTML窗口中创建一个HTML窗口，并且我希望根据在创建窗口中单击的按钮来改变创建的HTML窗口的背景图像

我错过了什么/搞砸了什么

我为这篇文章的复杂性道歉，但是我想确保我已经清楚地解释了我要做的事情，并且我已经提供了所有的HTML和Javascript源代码来支持我在这里要做的事情

---

最后，我想提前感谢大家为解决这个问题所提供的任何建议、帮助、参考和建议。

这就是我的开始。这起作用了

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>

<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>

html0.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>

<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>

功能更改页面（按钮名称，
按钮编号）
{
document.getElementById（“image1”）.src=Image_数组[buttonNumber]；
generatePageContent（按钮编号）；
}
函数generatePageContent（按钮编号）
{
试一试{
var newWindow=window.open（'html1.html'，'someWindowName'，'width=788，height=632，left=100，top=200，toolbar=yes'）；
newWindow.onload=loadSecondWindow.apply（此[buttonNumber，newWindow]）；
} 
捕获（e）
{
//虽然IE在这里抛出“未实现”异常，但它会更改图像。。
//有人知道为什么吗？
}
}
函数加载第二个窗口（按钮编号，新窗口）
{
setTimeout（函数（）{
//window.focus（）；
newWindow.document.getElementById（“image2”）.src=Image_数组[buttonNumber]；
}，500）；//我从2000超时开始
}
var Image_数组={}；
图像_数组['0']='0.png'；
图像_数组['1']='1.png'；
函数curry（）{
如果（！arguments.length）返回此参数；
var\uu method=this，args=slice.call（参数，0）；
返回函数（）{
var a=合并（参数、参数）；
返回_方法。应用（此，a）；
}
}
打开html1.html

By window是指iframe吗？或者，如果所有的页面都在独立的窗口中，那么每个页面的背景都应该在自己的html中。另外，你有一个很长的问题，很难全部阅读，请尝试使用创建一个页面示例，并将链接发送给我们，以便我们可以更好地帮助你：）img的路径正确吗？html文件是否加载在HTMLWindow_0 rel中