使用父级中的javascript编辑iframe的DOM

Question

所以我在A.html中有一个非常简单的网站

<body>
    <p class="text">Some text</p>
</body>

另一个网站在B.html的iframe中显示A

<body>
    <iframe id="frame" src="B.html" onload="onLoadHandler();"></iframe>
</body>

如果我在Google chrome浏览器中打开文件B，则一切都会按预期显示。 但是，如果我在B.html中执行以下JavaScript代码行（尝试将iframe中p元素的颜色更改为粉红色）

function onLoadHandler()
{
    var frameElement = document.getElementById('frame');
    var frameDocument = frameElement.contentWindow ? frameElement.contentWindow : frameElement.contentDocument.defaultView;

    var x = frameDocument.getElementsByClassName("text");
    x[0].style.backgroundColor = "pink";
}

我在第二行收到以下错误：

未捕获到的SecurityError：阻止了源为“ null”的帧访问源为“ null”的帧。 协议，域和端口必须匹配。

这只是一个虚拟测试，真正的场景是我们拥有网站www.company.com，并且在iframe中运行www.verysecurebank.com，我们希望编辑该iframe中某些按钮的样式。 是的，域名永远不会匹配。

不过，我想知道为什么浏览器会将此视为跨站点脚本，但是如果您使用开发人员工具（f12），则可以操纵iframe的任何部分，而浏览器本身不会出现问题？ 我们可以使用开发人员工具将iframe中的所有按钮成功设为蓝色，但是我们无法使用包含iframe的父html中的javascript实现它。

Answer 1

判断是否存在跨域的三个规则：

不同的协议；
不同的端口；
不同的域名。

前端开发人员无法解决第一个和第二个问题。 作为最后一个，如果两个域具有相同的主域名，则可以通过将document.domain设置为相同的主域名来解决。

使用父级中的javascript编辑iframe的DOM

问题描述

1 个解决方案

解决方案1
0 2015-04-13 15:34:40

使用父级中的javascript编辑iframe的DOM

问题描述

1 个解决方案

解决方案1 0 2015-04-13 15:34:40

解决方案1
0 2015-04-13 15:34:40