js 不同源的情况下 iframe还可以通讯吗

最新推荐文章于 2024-07-05 18:03:34 发布

天下一场夢

最新推荐文章于 2024-07-05 18:03:34 发布

阅读量385

点赞数 4

分类专栏： Javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/ivan5277/article/details/139291404

版权

Javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

是的。即使在不同源的情况下，iframe之间仍然可以通过postMessage API进行通信。postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，这对于实现跨域通信非常有用。

基本原理

发送消息：使用window.postMessage方法从一个窗口向另一个窗口发送消息。消息可以是任何基本类型或可序列化对象（会被转换成字符串）。
监听消息：在接收消息的窗口中，使用window.addEventListener('message', callback)来监听message事件。当消息到达时，会触发该事件，回调函数会被执行，并可以访问到发送的消息及发送方的信息。

示例

主页面（parent.html）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Page</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const iframe = document.getElementById('myIframe');
    iframe.onload = function() {
        iframe.contentWindow.postMessage('Hello from Parent', 'https://child.example.com'); // 替换为目标iframe的源
    };
    
    window.addEventListener('message', function(event) {
        if (event.origin !== 'https://child.example.com') return; // 确认消息来源安全
        console.log('Received from iframe:', event.data);
    }, false);
};
</script>
</head>
<body>
<iframe id="myIframe" src="https://child.example.com/child.html"></iframe>
</body>
</html>

iframe页面（child.html）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Iframe</title>
<script>
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent.example.com') return; // 确认消息来源安全
    console.log('Received from parent:', event.data);
    event.source.postMessage('Hello from Child', event.origin); // 回复消息给父页面
}, false);
</script>
</head>
<body>
<p>This is the child iframe.</p>
</body>
</html>