如何用另一帧更改一帧的背景颜色?
How do I change background color of one frame with another frame?
我知道框架已被弃用,但我需要为此使用它们。
我有3帧; upperframe、lowerrightframe 和 lowerleftframe。
所有帧 link 到另一个 html 文件。
我应该在 lowerrightframe 的 html 文件中输入什么来更改 lowerleftframe 的背景颜色?
例如,用户按下右下方框架中的按钮,它会更改左下方框架的颜色。
这是我目前所拥有的(使用 JS)
function changeBGColor (newColor)
{
document.getElementById("lowerleftframe").style.bgColor=newColor;
}
这是按钮。
<button type="button" onclick="changeBGColor('white')">Change Color</button>
好的,这里有很多注意事项是一个解决方案。
请记住,所有 html 文件都应位于同一域中。
site/files 应该在某种网络服务器上提供服务,例如本地主机(至少在 chrome 中)。
出于安全原因,来自不同域或来自 file:// 的文件将抛出跨源限制错误。
顶部框架集页面...index.html:
<html>
<frameset cols="50%, 50%">
<frame src="left.html" name="leftF"></frame>
<frame src="right.html" name="rightF"></frame>
</frameset>
</html>
右框html...right.html
<html>
<head></head>
<body>
<h1>Righty</h1>
</body>
</html>
改变右框颜色的左框html和javascript...left.html
<html>
<head>
<script>
function changeColor() {
var f = parent.frames["rightF"];
f.document.body.style.backgroundColor = "red";
}
</script>
</head>
<body>
<h1>Lefty</h1>
<button type="button" onclick="changeColor()">Change Color</button>
</body>
</html>
从一帧改变另一帧颜色的实际代码是:
var f = parent.frames["rightF"];
f.document.body.style.backgroundColor = "red";
其中"rightF"是右框的名称。 parent 是框架集。我们将向上一步到父级,然后访问具有给定名称的框架,然后更改它的 body.style.
我知道框架已被弃用,但我需要为此使用它们。
我有3帧; upperframe、lowerrightframe 和 lowerleftframe。 所有帧 link 到另一个 html 文件。 我应该在 lowerrightframe 的 html 文件中输入什么来更改 lowerleftframe 的背景颜色?
例如,用户按下右下方框架中的按钮,它会更改左下方框架的颜色。
这是我目前所拥有的(使用 JS)
function changeBGColor (newColor)
{
document.getElementById("lowerleftframe").style.bgColor=newColor;
}
这是按钮。
<button type="button" onclick="changeBGColor('white')">Change Color</button>
好的,这里有很多注意事项是一个解决方案。 请记住,所有 html 文件都应位于同一域中。 site/files 应该在某种网络服务器上提供服务,例如本地主机(至少在 chrome 中)。 出于安全原因,来自不同域或来自 file:// 的文件将抛出跨源限制错误。
顶部框架集页面...index.html:
<html>
<frameset cols="50%, 50%">
<frame src="left.html" name="leftF"></frame>
<frame src="right.html" name="rightF"></frame>
</frameset>
</html>
右框html...right.html
<html>
<head></head>
<body>
<h1>Righty</h1>
</body>
</html>
改变右框颜色的左框html和javascript...left.html
<html>
<head>
<script>
function changeColor() {
var f = parent.frames["rightF"];
f.document.body.style.backgroundColor = "red";
}
</script>
</head>
<body>
<h1>Lefty</h1>
<button type="button" onclick="changeColor()">Change Color</button>
</body>
</html>
从一帧改变另一帧颜色的实际代码是:
var f = parent.frames["rightF"];
f.document.body.style.backgroundColor = "red";
其中"rightF"是右框的名称。 parent 是框架集。我们将向上一步到父级,然后访问具有给定名称的框架,然后更改它的 body.style.