postMessage跨域传值

已于 2022-08-25 18:06:37 修改
阅读量407 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2021-02-01 17:31:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joe_324/article/details/113525115
版权
本文介绍了如何使用`postMessage`方法进行跨域通信，包括从子页面向父页面传递数据以及从父页面向子页面传递数据的详细步骤和示例代码。
摘要由CSDN通过智能技术生成 
<iframe ref="iframe" id="iframe" :src="item.content" frameborder="0" width="100%" height="700"></iframe>

子传父

子页面iframe

//某方法里：
window.parent.postMessage({
   
  cmd: 'gotoDicData',   //事件的自定义名称
  params: {
最低0.47元/天 解锁文章
joe_324
关注
跨域传值即主页面与iframe之间互相传值
09-04
【跨域传值】是指在Web开发中，由于同源策略的限制，主页面与不同源的`iframe`之间无法直接进行数据交换。但通过一些技术手段，开发者可以实现主页面与`iframe`之间的通信，以达到数据共享的目的。本文将详细介绍两...
postmessage解决两个跨域的页面之间传递参数
weixin_67849181的博客
06-28 2220
1.iframe和postMessage都是可以跨域的，而localStorage是不能跨域共享数据的2.window.postMessage 中的window 始终是指将要跳转的目标页面的window对象原文链接：https://www.jianshu.com/p/6be6c3f2867a。
【JS】postMessage 用法（可以给iframe传值）
qq_45677671的博客
12-08 1万+
跨文档消息，有时候也简称为`XDM(cross-document messaging)`，是一种在不同执行上下文（如不同源的页面）间传递信息的能力。 例如：`www.wrox.com`上的页面想要与包含在内嵌窗格中的`p2p.wrox.com`上面的页面通信 `XMD`的核心就是`postMessage()`方法，将`message`传递给指定窗口
postMessage在网页间传递数据
weixin_48885013的博客
12-11 3143
postMessage window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。 两页面间 协议、域名、端口号相同，才能相互通信 语法 oth
vue中通过postMessage传值，通过window.opener双向通信
最新发布
男神的专栏
03-07 1947
最近有一个需求是从当前项目带着token和uuid点击按钮跳转到另一个不同域名的项目去，在纠结了多个跨域通信的方法后，最后选择较简单的postMessage来进行通信！！
postMessage传值
bidepanm的博客
09-07 795
<div> <iframe name="js-mainiframe" id="js-mainiframe" src="" frameborder="0" width="100%" height="100%" allowtransparency="true"></iframe> </div> // 发送消息 var flag = 'xxxRefresh'; window.docu
详解使用postMessage解决iframe跨域通信问题
12-13
【跨域通信问题与postMessage】 在Web开发中，跨域通信是一个常见的挑战，由于浏览器的同源策略限制，不同源的页面之间不能直接共享数据或触发交互。然而，有时候我们需要在一个页面（如主页面）中嵌入另一个页面...
跨域弹窗传值
01-14
`window.postMessage`是HTML5引入的一个API，用于实现跨域通信。在子窗口中，我们可以使用`parentWindow.postMessage(data, targetOrigin)`发送数据，其中`parentWindow`是父窗口的引用，`data`是要传递的数据，`...
letswrite-postMessage:postMessage 主页、iframe页可互相传值
05-08
`postMessage` API就是为了满足这种需求而设计的，它允许跨窗口、跨域的数据传递，尤其在处理`iframe`与父页面间的通信时非常实用。让我们深入探讨`postMessage`的工作原理以及如何在主页和`iframe`页面之间实现数据...
Html5 postMessage实现跨域消息传递
09-28
主要介绍了Html5 postMessage实现跨域消息传递的相关资料,需要的朋友可以参考下
掌握使用postMessage传递数据
wang_fu_gui_ya的博客
09-26 450
熟练掌握postMessage
字典表设计
无名小卒菜的博客
07-12 2362
主表， create table land_system_in.tb_dict_type ( dic_type_id varchar(32) not null comment '字典类型id' primary key, dic_type_code varchar(50) null comment '字典类型key', dict_t
postMessage - 跨域消息传递
热门推荐
huangpb的博客
11-04 7万+
window.postMessage() 方法可以安全地实现跨域通信和页面间数据通信。 postMessage 可用于解决以下方面的问题： 页面和其打开的新窗口的数据传递 页面与嵌套的 iframe 消息传递 多窗口之间消息传递 想要使用 postMessage 实现跨域和页面间数据通信，只要记住 window 提供的 postMessage 方法和 message 事件就ok了。 语法...
postmessage传递参数
qq_47666300的博客
11-24 525
子传父(新打开一个页面)
vue---iframe的postMessage跨域通信
最爱松露巧克力
09-16 1792
前端爬坑日记之vue内嵌iframe并跨域通信 下面将3天的爬坑最终以问答的方式总结如下： 1、Vue组件中如何引入iframe？ 2、vue如何获取iframe对象以及iframe内的window对象？ 3、vue如何向iframe内传送信息？ 4、iframe内如何向外部vue发送信息？ 1、Vue组件中如何引入iframe？ <template> <div class="act-form"> <iframe :src="src"><
PostMessage---页面之间跨窗口的通信
xk_initial的博客
06-07 2749
PostMessage window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。 语法 otherWindow.postMessage(messa
postMessage解决跨域、消息传递（平台嵌入其他项目，需要相互发送接受消息）
CC酱写前端的博客
12-17 1203
postMessage解决跨域、消息传递（平台嵌入其他项目，需要相互发送接受消息）
PostMessage(异步)和SendMessage(同步)的区别
xiaodan007的专栏
06-20 4万+
PostMessage和SendMessage的区别   1， PostMessage只把消息放入队列，不管其他程序是否处理都返回，然后继续执行，这是个异步消息投放函数。而SendMessage必须等待其他程序处理消息完了之后才返回，继续执行，这是个同步消息投放函数。而且，PostMessage的返回值表示PostMessage函数执行是否正确；而SendMessage的返回值表示其他程序处理
postmessage跨域
12-08
postMessage方法可以用于实现跨域通信。它可以在不同的窗口（包括iframe窗口）之间传递数据，即使这些窗口来自不同的域名。具体来说，postMessage方法可以向目标窗口发送消息，并在目标窗口的onmessage事件中接收消息。在发送消息时，需要指定目标窗口的URL，以确保只有目标窗口可以接收到消息。在接收消息时，需要检查消息来源是否可信，以防止恶意代码的攻击。下面是一个postMessage方法的示例： ```javascript // 发送消息 var targetWindow = window.parent; // 目标窗口为父窗口 var message = "Hello, parent window!"; // 要发送的消息 var targetOrigin = "http://parent.window.com"; // 目标窗口的URL targetWindow.postMessage(message, targetOrigin); // 接收消息 window.addEventListener("message", function(event) { if (event.origin !== "http://child.window.com") return; // 检查消息来源是否可信 var message = event.data; // 接收到的消息 console.log("Received message: " + message); }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值