有没有办法规避页面（域B）上的 iframe（域A）尝试访问 的属性时出现的跨域安全错误？window.top我想调用一个函数，即。someFunc，属于域 B，通过域 A 的 iframe 中的事件，在域 B 的上下文中。例子：a.com/index.html<!DOCTYPE html><html> <body> <script> var someFunc = t => document.querySelector("#test").text = t; </script> <span id="test">This is some dummy text.</span> <iframe src="https://b.com/index.html"></iframe> </body></html>b.com/index.html<!DOCTYPE html><html> <body> <button id="btn">Test</button> <script> document.querySelector("#btn").addEventListener("click", (e) => { window.top.someFunc("This text has been changed through a cross-origin") }); </script> </body></html>此示例在 Firefox 上引发以下错误：SecurityError: Permission denied to access property "someFunc" on cross-origin object
1 回答
12345678_0001
TA贡献1802条经验 获得超5个赞
规避此问题的正确方法是使用Window.postMessage - 本质上，将消息从 iframe 发送到其父窗口，如果它具有 的事件侦听器"message"，则可以相应地做出反应。
IE。：
a.com/index.html
<!DOCTYPE html>
<html>
<body>
<script>
let someFunc = t => document.querySelector("#test").text = t;
window.addEventListener("message", event => someFunc(e.data));
</script>
<span id="test">This is some dummy text.</span>
<iframe src="https://b.com/index.html"></iframe>
</body>
</html>
b.com/index.html
<!DOCTYPE html>
<html>
<body>
<button id="btn">Test</button>
<script>
document.querySelector("#btn")
.addEventListener("click", event => {
window.parent.postMessage("Changed text", "http://a.com");
});
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消