H5PostMessages实现跨页面通信
来源:互联网 发布:sai mac 打不开 编辑:程序博客网 时间:2024/05/29 13:12
效果图
postMessages
HTML5提供了新型机制PostMessage实现安全的跨源通信.
语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
- otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindow属性, 执行, window.open返回的窗口对象.
- message: 将要发送到其他窗口的数据.
- targetOrigin: 通过窗口的origin属性来指定哪些窗口能接收到消息事件, 其值可以是字符”*”(表示无限制)或者一个URL
- transfer: 是一串和message同时传递的Transferable对象. 这些对象的所有权将被转移给消息的接收方, 而发送一放将不再保有所有权.
例子
//1.html消息发送端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>消息发送端</title></head><body> <script> (function () { //模拟数据 let message = [ 'hi', 'hello', 'liuxuan', 'jizemingbu', 'daqiaoweijiu', ]; //随机获取message信息, 真实环境是从服务端获取数据 let getMessage = function () { let index = Math.floor(Math.random() * 10); return message[index] || null } let postMessageLoop = function () { let randomTime = Math.floor(Math.random() * 1000); setTimeout(() => { let message = getMessage(); if (message !== null) { window.parent.postMessage(message, 'http://localhost:8088'); } postMessageLoop(); }, randomTime); } postMessageLoop(); })() </script></body></html>
//2.html 消息接收端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>消息接收端</title></head><body> <ul id="messageList"></ul> <iframe id="postWindow" src="1.html" style="display:none"></iframe> <script> (function (w) { let doc = w.document; let msgList = doc.querySelector('#messageList'); let handler = function (msg) { let li = doc.createElement('li'); li.innerText = msg; msgList.appendChild(li);//把消息显示 } //监视postMessage发送的消息 w.addEventListener('message', function (event) { if (event.origin === 'http://localhost:8088') { handler(event.data); } }, false); })(window) </script></body></html>
阅读全文
0 0
- H5PostMessages实现跨页面通信
- 实现QT与HTML页面通信
- 实现QT与HTML页面通信
- 实现QT与HTML页面通信
- 实现QT与HTML页面通信
- 实现不同页面之间的通信
- JS实现两个页面之间的通信
- window.postMessage跨页面通信
- 从跨域和同域两个角度实现多页面之间的通信
- 使用页面插件实现网页及时通信Demo
- 使用XML在不同的web页面见实现通信
- html父子页面(弹框)的实现和交互[通信]
- 通过JS实现两个页面之间的通信
- 跨页面通信的各种姿势
- 实现Web项目多个页面之间互相通信(web多屏通信)
- IFRAME实现跨域通信
- Android之页面通信
- 页面之间的通信
- 启动本地项目方法
- spark 编译安装
- tomcat6-源码分析(2)
- mysql的event schedule 可以让你设置你的mysql数据库再某段时间执行你想要的动作【mysql事件调度器】
- ICSE 2017 Do Developers Read Compiler Error Messages? 阅读笔记
- H5PostMessages实现跨页面通信
- Netty浅析
- 第八章El表达式第五节el表达式集合操作
- jQuery学习笔记
- 根据月份运算天数
- MVP post请求
- 制作HTML5游戏2.0
- 《HTML之列表标签》
- a/b输出商数Q和余数R 先除a 后余a string 每个字符 ---'0' 变成 int 形