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

| 作为此问题的标题sez: 如何从另一个HTML窗口更改1个HTML窗口的背景图像? 我有9个HTML窗口。 通过“ HTMLWindow_8”将它们称为“ HTMLWindow_0”和HTMLWindow_1。 HTML Window1具有背景图像和一组8个按钮。 每个按钮打开一个带有不同背景图像的新HTML窗口。 通过“ HTMLWindow_8”将其称为“ HMTLWindow_1”。 换句话说,“ HTMLWindow_0”上的Button–n创建了“ HTMLWindow_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”中的Javascript数组“ Image_Array”中。 在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个按钮中的任何一个都会激活一个称为“更改页面”的JavaScript功能。 “更改页”如下所示:
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”又调用了另一个JavaScript函数“ generatePageContent”。 “ 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];
在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函数“更改页”中更改“ 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. -->
换句话说,简而言之,我正在尝试使用创建窗口内的按钮从另一个HTML窗口内部创建一个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有点告诉我这是一个'timing \'问题。这使我认为打开的窗口可能尚未加载。.调试过程的下一步可能使您意识到,应该使用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>
    

要回复问题请先登录注册