如何解决如何从另一个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>
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 ()
var newWindow = window.open (\' HTMLWindow_x.html \',toolbar = yes\');
newWindow.document.getElementById(\"image2\").src = Image_Array [buttonNumber];
document.getElementById(\"image1\").src = Image_Array [buttonNumber];
document.getElementById(\"image1\").src = Image_Array [buttonNumber];
newWindow.document.getElementById(\"image2\").src = Image_Array [buttonNumber];
<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>
<div class=\"img\">
<img id = \"image2\"
src = \"../BookListPages/NoSuchPageForThisBook.tif\"
alt = \"Clearing The Path ...\"
width = \"765\"
height = \"580\"
border = \"2\"
/> <!-- End of img tag. -->
解决方法
这就是我开始的方式。这工作了。
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
<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\',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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
