用HTML5里的window.postMessage在两个网页间传递数据

最新推荐文章于 2024-07-30 17:41:38 发布
最新推荐文章于 2024-07-30 17:41:38 发布
阅读量2.2k 收藏
点赞数
分类专栏： 管理者/开发者 JavaScript 文章标签： html5 JavaScript

估计很少人知道HTML5 APIS里有一个 window.postMessage  API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。


原文参见：http://www.webhek.com/window-postmessage-api/


shenzhenNBA
关注
专栏目录
HTML5如何用window.postMessage在网页间传递数据
08-23
window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作...
vue中使用window.postMessage
qq_42905523的博客
10-10 2946
vue中使用window.postMessage通信
Vue进阶（九十二）：应用 postMessage 实现窗口通信
IT全栈 华强工作室
01-19 8120
在前端应用中，窗口间的通信用的地方还是挺多的，比如弹出qq登录认证窗。 postMessage语法 window.postMessage(msg,targetOrigin) 注意postMessage要通过window对象调用！因为这里的window不只是当前window，大部分使用postMessage的时候，都不是本页面的window，而是其他网页的window！如： iframe的con...
window.postMessage 支持回调函数
最新发布
阿东的博客
07-30 189
widow.postMessage如何支持回调？
window.postMessage讲解
glgom的博客
11-14 3492
postMessage详解
Javascript使用postMessage对iframe跨域通信
weixin_30824599的博客
07-30 335
今天才发现原来有这么个好东西啊，跨域通信太方便了， 举个小栗子： 共两个页面， 页面1：www.a.com/a.html 页面2：www.b.com/b.html 实现目标：两个网站页面实现跨域相互通信 当前例子依赖于 jQuery 3.0 页面代码：www.a.com/a.html <iframe id="myIframe" s...
HTML5中使用postMessage实现两个网页间传递数据
01-21
window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作...
利用HTML5的window.postMessage实现跨域通信
04-18
发送消息时，调用`postMessage`方法，传入两个参数：要传递的数据和接收数据的窗口的引用（通常是`window`对象的引用或`iframe`的`contentWindow`属性）。 接收窗口需要监听`message`事件来接收数据。当接收到消息...
HTML5的postMessage的使用手册
12-03
- 父页面通过`window.open()`创建新窗口，并在窗口加载完成后，使用`setTimeout`延迟调用`postMessage`，确保目标页面的`message`事件监听器已经准备就绪。 - 子页面同样通过`window.addEventListener('message', ...
windows通过消息（PostMessage）传递参数
qq_29067611的博客
07-18 1万+
在使用PostMessage或者SendMessage传递消息，需要传递不同种类型的数据，下面的方法可以传递各种类型的数据： 例如：std::vector&lt;std::string&gt;* pParams = new std::vector&lt;std::string&gt;; *pParams = params（传入的参数）; PostMes...
实现两个窗口通信方法－postMessage
热门推荐
DOS的博客
08-06 2万+
两个窗口的通信问题应该是一个比较常见的问题了，通信可以通过很多种方式,如下： localStorage postMessage websocket 今天博主先来一篇postMessage干货，后期还会给出websocket的实现代码。 首先来看一下基本的语法 otherWindow.postMessage(message, targetOrigin, [transfer]);o
HTML5里的window.postMessage
EmotionComputer
06-24 2379
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间 和 主线程与web worker线程间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外...
关于postMessage传值问题
gaoqiang1112的博客
04-13 5523
在做一个vue的项目 涉及跨域  然后利用iframe内嵌页 会有很多问题   所以尝试利用object标签去完成内嵌功能很简单   我写了一个小例子   跨域的     a 项目 vue的  端口8080b项目 express的 端口3000然后a项目引用object  在data写上b项目的页面的请求很好 页面出来了然后我想完成从b页面将数据给a 用于通信 达到后续操作的目的  然后这里就利用...
window.postMessage 父子窗口传值的正确用法
m0_61093442的博客
10-30 2155
接触到这个还是因为碰到一个两年前的项目，现在需要加新功能，这个是一个无vuex、无router的题目资源中心的项目。所以就想到了两个页面在不使用接口传值的方式进行postMessage通信。 父标签页 ...
知识点：window.postMessage
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
03-13 4105
window.postMessage() 方法可以安全的进行跨域、跨页面通信。 window.postMessage() 需要在页面加载完毕后才能进行跨域通信，但是我们无法检测目标页面的onload事件，所以只能使用setTimeout和setInterval来处理。发送消息otherWindow.postMessage(message, targetOrigin, [transfer])其中ot
window.open之postMessage传参数
weixin_33772645的博客
03-17 1330
这次要实现一个window.open打开子视窗的同时传参数到子视窗，关闭的时候返回参数。 当然简单的做法非常简单，直接在window.open的URL之后接参数即可，但是毕竟get method的参数长度受浏览器的限制，一般从2KB到8KB。 除了get之外，还可以用window.postMessage(), 参考下面的case演示。 主视窗HTML如下： 1 <!DOCTYP...
Windows SendMessage和PostMessage区别（最简单的讲解）
MusicMan
06-17 5326
SendMessage和PostMessage共同点： 都是向其他进程或本进程传递消息，消息是Windows处理机制的灵魂，这个消息就不详解了，大家可以百度一下看一下,很重要在Windows开发当中。 区别： SendMessage:等到另一个进程处理完消息再继续后续代码的执行 PostMessage:不管不顾，发了消息就执行后续的代码。 可以这样理解，SendMessage依赖另...
window.postMessage()两个弹窗返回值 使用回调函数解决办法
05-27
当使用 `window.postMessage()` 向同一窗口发送多个消息时，您可以使用回调函数来处理返回值。以下是一种可能的解决方案： 1. 在发送消息时，为每个消息分配一个唯一的标识符，并将该标识符作为消息的一部分发送。 2. 在接收到响应消息时，检查消息的标识符，并将响应值与标识符相关联。 3. 当您需要使用返回值时，您可以通过标识符获取响应值。 4. 在发送消息时，除了消息本身之外，还可以指定一个回调函数。当接收到响应消息时，调用回调函数，并将响应值作为参数传递。 以下是一个示例代码： ```javascript // 定义一个计数器，用于为每个消息分配唯一的标识符 let messageId = 0; // 定义一个对象，用于存储每个消息的响应值 const responseMap = {}; // 定义一个函数，用于发送消息并指定回调函数 function sendMessageWithCallback(message, callback) { // 为消息分配唯一的标识符 const id = ++messageId; // 将标识符作为消息的一部分发送 const data = { id, message }; window.postMessage(data, '*'); // 将回调函数与标识符相关联 responseMap[id] = callback; } // 在窗口接收到消息时，检查消息的标识符，并调用相关的回调函数 window.addEventListener('message', event => { const { id, message } = event.data; // 如果消息有标识符，则调用相关的回调函数 if (id != null && responseMap[id]) { const callback = responseMap[id]; delete responseMap[id]; callback(message); } }); ``` 使用上述代码，您可以通过以下方式发送消息并指定回调函数： ```javascript sendMessageWithCallback('hello', response => { console.log(response); }); ``` 当接收到响应消息时，代码将自动调用回调函数，并将响应值作为参数传递给它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值