Question

我知道不赞成使用框架，但是我需要为此使用它们。

我有3帧； upperframe，lowerrightframe和lowerleftframe。所有框架都链接到另一个html文件。我应该在html文件中放入lowerrightframe来更改lowerleftframe的背景颜色吗？

在这种情况下，用户按下右下框架中的按钮，它将更改左下框架的颜色。

这是我到目前为止（使用JS）

function changeBGColor (newColor)
{
     document.getElementById("lowerleftframe").style.bgColor=newColor;
}

这是按钮。

<button type="button" onclick="changeBGColor('white')">Change Color</button>

Answer 1

好吧，这里有很多注意事项是一种解决方案。请记住，所有html文件都应位于同一域中。站点/文件应在某种Web服务器上提供服务，例如localhost（至少在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”是右框架的名称。父级是框架集。我们要向上一步到父级，然后访问具有给定名称的框架，然后更改其body.style。

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

1 个答案: