如何用另一帧更改一帧的背景颜色？

Question

我知道框架已被弃用，但我需要为此使用它们。

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

Answer 1

好的，这里有很多注意事项是一个解决方案。请记住，所有 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.

如何用另一帧更改一帧的背景颜色？

How do I change background color of one frame with another frame?

javascript

html

css

colors

frames