HTML5之postMessage和addEventListener实现<iframe>跨域通信

最新推荐文章于 2025-06-26 15:46:33 发布

霜月枫桥

最新推荐文章于 2025-06-26 15:46:33 发布

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML&HTML5 web开发 JavaScript学习随笔

本文链接：https://blog.youkuaiyun.com/MOONCOM/article/details/53183154

JavaScript学习随笔同时被 3 个专栏收录

55 篇文章

订阅专栏

web开发

23 篇文章

订阅专栏

HTML&HTML5

18 篇文章

订阅专栏

本文介绍如何使用postMessage实现跨域通信，并提供了一个具体的示例，包括outer.html和inner.html两个页面的具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用postMessage实现跨域的前提条件是一个页面通过<iframe>调用另一个页面，示例如下所示：

在这个示例中，通过outter.html调用inner.html

这是outter.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>outter</title>
</head>
<body>
	获取的信息为：
	<div id="getMessage"></div>
	<iframe src="http://test.inner.com:8080/test/inner.html" frameborder="1"></iframe>
	<hr>
	要传入内部的信息：<input type="text" id="out"><input type="button" value="点击" id="but">
	<script>
	var message=document.getElementById("getMessage");
	var text=document.getElementById("out");
	window.addEventListener("message",function(e){
		if(e.data!=null){
			message.innerText=e.data;
		}
	});

	document.getElementById("but").onclick=function(){
		window.frames[0].postMessage(text.value,"http://test.inner.com:8080");
		text.value="";
	}
	</script>
</body>
</html>

这里显示inner.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>inner</title>
</head>
<body>
	外面传进来的信息为：
	<div id="getMessage"></div>
	<hr>
	要传到外面的信息为：<input type="text" id="text"><input type="button" value="传递" id="but">
	<script>
	var message=document.getElementById("getMessage");
	var text=document.getElementById("text");
	document.getElementById("but").onclick=function(){
		window.parent.postMessage(text.value,"http://test.outter.com:8080");
		text.value="";
	}
	window.addEventListener("message",function(e){
		if(e.data!=null){
			message.innerText=e.data;
		}
	});
	</script>
</body>
</html>

上面的示例如果你想试用的话，

一、需要在tomcat的webapps下，新建一个test文件夹，在test文件夹下放入inner.html和outter.html。

二、在电脑的hosts文件中配置两个域名127.0.0.1 test.inner.com和127.0.0.1 test.outter.com

三、浏览器访问的URL为 http://test.outter.com:8080/test/outter.html