iframe 利用postMessage 跨域通信

关注

原创最新推荐文章于 2026-03-22 00:34:03 发布 490 阅读 AI 写同款· GEO 优化 ›

iframe + postMessage 跨域通信 Web是构建在同源策略基础之上，同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。我们可以通过iframe来实现不同域之间互相请求资源。同源概念：协议相同、域名相同、端口相同目的：保证用户信息的安全，防止用户数据泄露限制范围： Cookie、LocalStorage、 IndexDB 无法读取 Dom 无法获取 AJAX 请求在浏览器端有跨域限制 ifr. 阅读详情

1.子页面：http://localhost:7080/b.jsp

<button onclick="send()">send</button>

<script>
window.addEventListener('message', function(ev) {
    var data = ev.data;
    console.info('message from parent:', data);
}, false);

function send() {
    parent.postMessage("hello", 'http://localhost:8080/'); // 若父页面的域名和指定的不一致，则postMessage失败
}
</script>

2.父页面：http://localhost:8080/a.jsp

<button style="font-size:20px;" onclick="send()">post message</button>
<iframe src="http://localhost:7080/b.jsp"></iframe>

<script>
function send() {
    var data = {name:"111",age:"222"};
	window.frames[0].postMessage(data, 'http://localhost:7080'); // 触发跨域子页面的messag事件
}

window.addEventListener('message', function(messageEvent) {
    var data = messageEvent.data; 
    console.info('message from child:', data);
}, false);
</script>

3.结果