本文介绍了详解html5 postMessage解决跨域通信的问题,分享给大家,具体如下:
效果图
postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindow属性, 执行,window.open返回的窗口对象. message: 将要发送到其他窗口的数据. targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件, 其值可以是字符”*”(表示无限制)或者一个URL transfer:是一串和message同时传递的Transferable对象. 这些对象的所有权将被转移给消息的接收方, 而发送一放将不再保有所有权.element.addEventListener(event,fn,useCaption ); 三个参数 event 事件 比如click mouseenter mouseleave 回调函数 useCaption用于描述是冒泡还是捕获。默认值是false,即冒泡传递。 当值为true,就是捕获传递。实现方式
主界面 main.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> <script type="text/javascript"> window.addEventListener('message',function(e){ console.log("e--->",e); const data = e.data; document.getElementById('main1').style.backgroundColor=e.data; },false) </script> </head> <body> <div id="main1" style="width:200px;height:200px;margin:100px;border:solid 1px #000;"> 我是主界面,等待接收iframe的传递 </div> <div style="margin:100px;"> iframe <iframe src="http://localhost:3000/iframe.html" width="800px" height="300px" ></iframe> </div> </body> </html>
iframe界面
<!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>Document</title> <style type="text/css"> html,body{ height:100%; margin:0px; } </style> </head> <body style="height:100%;"> <div id="frame" style="height:200px; width:200px;background-color:rgb(204, 204, 0)" onclick="changeColor()"> 点击改变颜色 </div> <script type="text/javascript"> function changeColor(){ var frame = document.getElementById('frame'); var color=frame.style.backgroundColor; if(color=='rgb(204, 102, 0)'){ color='rgb(204, 204, 0)'; }else{ color='rgb(204,102,0)'; } console.log("frame===>",frame); console.log("color",color); frame.style.backgroundColor=color; window.parent.postMessage(color,'*'); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
?? 本文全长 20 分钟 , 市场价值¥ xxx9.9 元, 建议在时间充裕下进行详细阅读。 ...
HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加br...
效果 html div class=sp-containerdiv class=sp-contentdiv class=sp-globe/divh...
Dreamweaver中想要给文字中的个别文字添加背景色,该怎么添加呢?下面我们就来看...
开启全站 https 访问以来,分享代码一直不能用,启用了小绿标就成了灰标。唉,为...
!--[if lte IE 6] ![endif]-- IE6及其以下版本可见 !--[if lte IE 7] ![endif]--...
以下内容有可能需要科学上网才能做到。 开始 我这里使用的环境是 阿里云ecs ,系...
安全是一门朴素的学问,也是一种平衡的艺术。 如同开发者会遇到的挑战一样,有很...
recorder.js microphone基于HTML5的录音功能,输出格式为mp3文件。 前言 完全依...
网页中的颜色呈现会受到各种因素的影响,即使你的网页使用了非常漂亮的配色方案...