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

【问题标题】：How do I change background color of one frame with another frame?如何用另一帧更改一帧的背景颜色？
【发布时间】：2018-12-11 16:50:00
【问题描述】：

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

我有 3 帧；上框、右下框和左下框。所有框架都链接到另一个 html 文件。应该在lowerrightframe的html文件中放入什么来改变lowerleftframe的背景颜色？

如用户按下右下框架中的一个按钮，它会改变左下框架的颜色。

这是我目前所拥有的（使用 JS）

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

这是按钮。

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

【问题讨论】：

@Nawed Khan 我知道如何在 CSS 中做到这一点，我的意思是说我点击右下框架中的一个按钮，它会改变左下框架的颜色。
向我们展示您已有的代码。你想做什么以及它是如何不工作的。从另一帧更改一帧的颜色是什么意思？点击？加载？
我将JS添加到原始帖子中。但是，我不确定应该为按钮添加什么。
明确一点，你有 iFrames 而不是 Frames....这是两个不同的东西。
框架只是窗口......不是元素。它们没有颜色或背景等属性，只有边框、高度、宽度等。您正在尝试从一个框架的 html 页面访问另一个框架的 html 页面。所有 html 页面都在同一个域中吗？

标签： javascript html css colors frames

【解决方案1】：

好的，这里有很多警告是一个解决方案。记住所有 html 文件都应该在同一个域中。站点/文件应该在某种网络服务器上提供服务，比如 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”是右框架的名称。 parent 是框架集。我们将向父级迈进一步，然后访问具有给定名称的框架，然后将其更改为 body.style。

【讨论】：

真快，你为了我的目的把左右混在一起了。无论如何，这是行不通的。如果我改变它来改变它自己的框架的颜色，它会起作用，而不是其他的。
如果您将这三个文件保存在一个文件夹中并将其放在 webroot 中，它将起作用。这是一个显示概念的简单测试项目，不使用您的任何文件或名称。你必须更具体地说明什么不起作用。查看控制台是否有任何错误。
我只用这3个文件进行了测试，主文件显示为空白。
主文件中没有任何东西不能工作。这是一个工作示例：nawedkhan.com/frames
搞定了。出于某种原因，如果我尝试通过 Chrome 访问该站点（通过同一台 PC 上的文件路径），它将无法正常工作，但在 Edge 和 Firefox 中可以，但如果我将它放在我的网站上，它在 Chrome 上可以正常工作.另外，您可以将其发布在答案中以便我接受吗？