使用 postMessage 解决 iframe 跨域数据传输

最新推荐文章于 2024-08-08 22:17:44 发布
最新推荐文章于 2024-08-08 22:17:44 发布
阅读量898 收藏 1
点赞数
分类专栏： html 文章标签： postMessage iframe cross-origin message 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsl0530hsl/article/details/87718819
版权

关于 postMessage 相关描述请参考：
简述html 中的 postMessage

<div id="main_page" class="main_page">
        <iframe id="main_frame" name="main_frame" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" style="overflow: hidden;">
            </iframe>
    </div>

iframe 引入的页面若不是同一个 服务器 的，那么在使用 js 访问 iframe 中的内容时，就会遇到跨域问题。

比如如下访问：

window.top.frames["main_frame"].document

报出的问题如下：

VM18888:1 Uncaught DOMException: Blocked a frame with origin "http://localhost:63342" from accessing a cross-origin frame.
    at <anonymous>:1:33

使用 html5 postMessage 可以有效的解决这个问题，但后面通过测试，html 也是可以的。

代码如下：
iframe 引入的子页面添加如下代码：

<script type="text/javascript">
	window.onload = function() {
		window.document.onclick = function() {
			window.parent.postMessage("click", "*");
		};
	};
</script>

比如如下子页面：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>

<body>
	<h1>
		This is my JSP page. <br>
	</h1>
</body>
<script type="text/javascript">
	window.onload = function() {
		window.document.onclick = function() {
			// 向父页面传数据
			// 需要注意的是，第一个参数最好是 字符串
			window.parent.postMessage("click", "*");
		};
	};
</script>
</html>

父页面中添加如下代码来接收 iframe 子页面传输的数据：

// 接收 iframe 传回的click事件
window.addEventListener('message', function(e){
    //e.data就是子页面传过来的第一个参数，这里就是click
    console.log(e.data);
}, false);

这样就可以解决跨域问题了。

雾里看花叹朦胧
关注
专栏目录
window.postMessage 在iframe父子页面数据传输，页面之间跨域共享、传输数据，实现单点登录
kevin_xingka的博客
11-12 1189
项目需求 实现单点登录多后台，比如 登录淘宝后，跳转链接到天猫时，天猫处于登录中的状态。 实现方式 基于 Iframe+Postmessage，相互之间发送登录token，实现SSO(SingleSignOn)单点登录功能。 实例 期望结果：假设登录昆仑后台拿到token后，跳转到邻汇吧后台时，页面处于登录状态。 方案一： 登录昆仑后台拿到token后，跳转到邻汇吧后台时，向邻汇吧内嵌隐藏的昆仑 iframe 发送 getToken 的消息iframe.contentWindow.post
postmessage解决iframe页面跨域
10-19
通过JS技术解决引入iframe页面引起的跨域问题，postmessage解决iframe页面跨域问题
postMessage解决iframe跨域问题
a741230033的博客
07-18 129
转：https://juejin.im/post/5b8359f351882542ba1dcc31 https://juejin.im/post/590c3983ac502e006531df11 https://www.cnblogs.com/dolphinX/p/3464056.html 侵删。 转载于:https://www.cnblogs.com/wu-guo-...
iframe跨域消息通信(postMessage和message事件)
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-08 1572
在现代Web开发中，跨域通信是一个常见的需求，尤其是在涉及多个子域或第三方服务的情况下。和message事件是实现跨域通信的一种有效方式。本文将详细介绍如何利用这两种技术来进行iframe与父窗口之间的消息通信，并提供丰富的示例代码和实践技巧。
在iframe中使用postMessage解决跨域问题
cszzl123的博客
03-11 3920
在iframe中使用postMessage解决跨域问题 在iframe中向父页面发送消息时，子页面和父页面的http协议，域名，端口号任意一个不相同时会产生跨域问题，使用postMessage可解决这一问题。 父页面JS代码 window.onload = function() { window.addEventListener('message', function (e) { // 监听 message 事件 console.log(e.data); }); } 子页面JS
使用 iframe + postMessage 实现跨域通信
热门推荐
糖衣
02-28 7万+
在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面，这时第一反应是使用 iframe，但是产品又提出在 a.com 中操作，b.com 中进行显示，或者相反。 1、postMessage  postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。语法： otherWindow.postMessage(m
详解使用postMessage解决iframe跨域通信问题
12-13
这周碰到一个让人头疼的需求：要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了，但问题来了，我和第三方web项目是有交互的，这就违反同源策略了，处理跨域问题是最让人头疼的事之一。 需求是这样的，在我的页面点击一些按钮，要实时反馈到iframe子页面，子页面再进行响应。 当时脑子里第一时间想到的解决方案是：用NGINX把两个项目代理到同一域名下。但这样似乎有点小题大做了，有没有更方便快捷的方法呢？ 在window对象下有个postMessage方法，是专门用来解决跨域通信问题的。 关于postMessage的详细介绍请戳这里，不过MDN的文档太详细了，导致有些同学
HTML5中使用postMessage实现Ajax跨域请求的方法
09-28
4. Flash：利用Flash插件的跨域特性来实现数据传输。 然而，HTML5为了解决跨域问题，引入了window.postMessage()方法。这个方法提供了一种安全的进行跨源通信的方式，允许Window对象之间使用postMessage方法发送...
JavaScript使用HTML5的window.postMessage实现跨域通信例子
01-21
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。... window.name 保存数据以及跨域 iframe 静态代理动态传输方案，充分的运用了window.name因为页面的url改变而name不改变的特性。 各种方案
详解HTML5 window.postMessage与跨域
09-27
postMessage提供了非常灵活的跨域通信方式，适用于多种场景，如父子页面间的数据交互、跨域的iframe通信等。相比其他跨域技术，如JSONP或CORS，postMessage提供了更多的控制，可以更加精细地管理跨域通信的权限和...
postMessage 跨域通信 iframe
BigOrange的博客
07-15 926
需求背景： iframe嵌套页面，需要进行参数传递，同时父与子是跨域（跨源）的。 核心方法： window.postMessage() 方法可以安全地实现跨源通信。 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。 message 将要发送到其他
H5 Notes：PostMessage Cross-Origin Communication
weixin_34006965的博客
11-18 325
Javascript中要实现跨域通信，主要有window.name，jsonp，document.domain，cors等方法。不过在H5中有一种新的方法postMessage可以安全实现跨域通信，并且使用简单。 要使用postMessage，首先得检查浏览器是否支持该方法，postMessage属于window对象，检测方法如下： if('postMessage' in window){...
window.postMessage 传参无效
weixin_50572740的博客
07-18 1410
API地址https//developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage。需求：父window点击树节点信息的时候，向子iframe传递数据。更改后添加iframe.onload传参正常。
解决Vue中postMessage失效的问题
百度一下 猎人社区
06-25 2712
由于postMessage只能传递字符串类型的数据，所以在发送消息之前，我们需要将需要传递的数据进行序列化，通常使用JSON.stringify()方法。四、使用Vue插件封装postMessage方法 为了简化在Vue中使用postMessage的过程，并避免一些常见的错误，我们可以考虑封装一个Vue插件。五、使用Vue Router进行路由间通信 如果我们需要在Vue的不同路由之间进行通信，可以考虑使用Vue Router提供的传递参数的功能。因此，我们需要仔细检查目标窗口的origin是否正确设置。
iframe配合postmessage注意点
小米人的博客
09-08 472
使用iframe的起因：     现存在两个不同的系统，A系统和B系统。因为某中原因，A系统要调用B系统页面中的个别页面，所以引入了iframe；并且两个系统之间需要通信，设计到跨域问题，就有了postmessage; 在系统中的代码示例： <div style="height:500px;"> <iframe style="width:100%;height:100%;" src={this.iframeUrl} ref="xxxIframe
JavaScript高级语法之跨域（postMessage，CORS，JSONP）
上善若泪
05-08 3405
目录 1 postMessage概述 1.1 iframe与主页面的通信 2 CORS 2.1 发送请求，“预检”机制 2.2 收到响应 3 JSONP 1 postMessage概述 所谓“同域限制”指的是，出于安全考虑，浏览器只允许脚本与同样协议、同样端口、同样域名的地址进行通信。比如，www1.example.com页面上面的脚本，只能与该域名（相同协议、相同端口）进行通信，...
iframe跨域传值超过2M的问题解决
housen1987
10-10 743
使用iframe进行传值时，如果采用URL的方式传递，则最大只能传递大约2k的数据，超过这个长度就会被截断了，那么是否可以采用post的方式传值呢？答案是可以的，我们可以采用js创建一个form表单，并将此form提交到iframe上，这样就能做到打破2k数据的限制。   &lt;iframe id="frame1" name="frame1" src="" style="display:no...
使用 postMessage 解决 iframe 跨域通信问题
喜洋杨
04-07 4181
是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息。postMessage方法第二个参数可以设置要发送到哪个url，如果当前子页面的url和设置的不一致，则会发送失败，我们设置为*，代表所有url都允许发送。总结：所谓的跨窗口发送消息，就是通过在别的窗口操作本窗口发送消息，然后本窗口再自己接收的方式实现。首先我们模拟场景，假设有两个不同源的页面，
iframe跨域问题怎么解决
05-06
1. 使用postMessage：通过在父页面和子页面之间使用postMessage方法进行通信，可以实现跨域数据传输。父页面通过postMessage向子页面发送消息，子页面通过监听message事件接收消息，并进行相应处理。 2. 设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值