如何从另一个HTML窗口更改1个HTML窗口的背景图像
How do I change the background image of 1 HTML window from another HTML window?
作为这个问题的标题：
如何从另一个HTML窗口更改1个HTML窗口的背景图像？
我有9个HTML窗口。
称之为"HTMLWindow_0"&HTMLWindow_1'到'HTMLWindow_8'。
HTML Window1有一个背景图像和一组8个按钮。
每个按钮都会打开一个具有不同背景图像的新HTML窗口。
将它们称为"HMTLWindow_1"或"HTMLWindow_8"。
换句话说，"HTMLWindow_0"上的Button–n会创建"HTMLWindow_n"。
由"HTMLWindow_0"上的一组按钮创建的每个HTML窗口都有一个与其相关的背景图像。
背景图像x与HTMLWindow_x相关联。
HTML&"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"中，将根据在"HTMLWindow_0"上单击的按钮1到8创建任何HTML窗口1到8。
然而，线路：
newWindow.document.getElementById("image2").src = Image_Array [buttonNumber];
在Javascript函数'generatePageContent'中不起作用。
这一行应该更改creatED 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. -->
换言之，简单地说，我正试图使用creatING窗口内的按钮从另一个HTML窗口内创建HTML窗口，并且我想根据在creatNG窗口中单击的按钮来改变creatED 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>
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>
- 窗口大小html css
- 如何关闭html中的iframe弹出窗口
- javascript弹出窗口没有正确加载html表单
- 按下一个HTML按钮，该按钮使用一个功能在同一个新窗口中打开URL
- 从html锚元素传递窗口对象
- 编辑弹出窗口的HTML的单击命令
- Chrome应用程序在全屏中创建新窗口-html元素不是全高的
- 基本html页面和弹出窗口之间的数据交换
- 使用html中的jquery输入值窗口提示
- HTML 框架 - 防止引导弹出窗口在用户单击正文时消失
- HTML窗口弹出窗口和iPad的正确降级
- 在其他html窗口中创建一个html窗口
- HTML窗口刷新页面顶部
- 如何将数据从Parent html窗口传递到弹出窗口
- 传递COM和访问HTML窗口之间的组件
- 如何显示页面上没有地址栏和状态栏的html窗口
- 跨HTML窗口的Javascript函数调用
- 如何从另一个HTML窗口更改1个HTML窗口的背景图像
- Javascript HTML窗口打印问题
- HTML窗口打开按钮单击在IE中不起作用
