转自:http://www.cnblogs.com/wshiqtb/p/3171199.html

postMessagePortal.html 页面代码

<!DOCTYPE html> <title>标题</title> <link rel="stylesheet" href="styles.css"> <link rel="icon" href="http://apress.com/favicon.ico"> <script>  var targetOrigin = "http://22527.vhost20.boxcdn.cn";  var defaultTitle = "Portal"; var notificationTimer = null;  function messageHandler(e) {     if (e.origin == targetOrigin) {         notify(e.data);     } else {         // ignore messages from other origins     } }  function sendString(s) {     document.getElementById("widget").contentWindow.postMessage(s, targetOrigin); }   function notify(message) {     stopBlinking();     blinkTitle(message, defaultTitle); }  function stopBlinking() {     if (notificationTimer !== null) {         clearTimeout(notificationTimer);     }     document.title = defaultTitle; }  function blinkTitle(m1, m2) {     document.title = m1;     notificationTimer = setTimeout(blinkTitle, 1000, m2, m1) }  function sendStatus() {     var statusText = document.getElementById("statusText").value;     sendString(statusText); }  function loadDemo() {     document.getElementById("sendButton").addEventListener("click", sendStatus, true);     document.getElementById("stopButton").addEventListener("click", stopBlinking, true);     sendStatus(); } window.addEventListener("load", loadDemo, true); window.addEventListener("message", messageHandler, true);  </script>  <h1>跨域通讯</h1> 传递信息:<input type="text" id="statusText" value="Online"> <button id="sendButton">确定</button> <br> <br> <iframe id="widget" src="http://22527.vhost20.boxcdn.cn/postMessageWidget.html"></iframe> <p>     <button id="stopButton">停止标题闪烁</button> </p>

postMessageWidget.html页面的代码

<!DOCTYPE html> <title>标题</title> <link rel="stylesheet" href="styles.css"> <script>  var targetOrigin = "http://www.weixiu0376.cn";  // TODO whitelist array  function messageHandler(e) {     if (e.origin === "http://www.weixiu0376.cn") {         document.getElementById("status").textContent = e.data;     } else {         // ignore messages from other origins     } }  function sendString(s) {     window.top.postMessage(s, targetOrigin); }  function loadDemo() {     document.getElementById("actionButton").addEventListener("click",         function() {             var messageText = document.getElementById("messageText").value;             sendString(messageText);         }, true);  } window.addEventListener("load", loadDemo, true); window.addEventListener("message", messageHandler, true);  </script> <p>显示接收信息: <strong id="status"></strong><p> <div>     <input type="text" id="messageText" value="填写消息内容">     <button id="actionButton">发送消息</button> </div>

html5跨域通讯之postMessage的用法的更多相关文章

  1. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  2. iframe跨域通讯

    工作中遇到一个问题,IFRAME嵌套了一个外部页面用于统计 统计的JS由我们提供,并且需要提供热点图 一开始就碰到的问题就是 不知道页面高度 需要子页面传回页面高度用于将IFRAME拉升到合适高度 当 ...

  3. XDomainRequest IE8&amp;IE9 cors 跨域通讯的处理方法

       版权声明:避免百度一下通片同一篇文章,未经博主允许不得转载.本博客作为笔记使用,正确性请自行验证. https://blog.csdn.net/u014071104/article/detail ...

  4. html5跨域数据传递(postMessage)

    在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...

  5. JavaScript 跨域:window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  6. Html5 跨域通信

    H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 ...

  7. 跨域通信--Window.postMessage()

    一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...

  8. iframe中子父页面跨域通讯

    目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...

  9. HTML5跨域请求--POST方式

    var xmlHttp; // Create the XHR object. function createCORSRequest(method, url) { var xhr = new XMLHt ...

随机推荐

  1. linux redhat6.4安装oracle11g

    系统要求 1. Linux安装Oracle系统要求 系统要求 说明 内存 必须高于1G的物理内存 交换空间 一般为内存的2倍,例如:1G的内存可以设置swap 分区为3G大小 硬盘 5G以上  2.修 ...

  2. Nginx+HTTPS(SSL/TLS)

    环境 首先确保机器上安装了openssl和openssl-devel rpm -qa | grep openssl #yum install openssl #yum install openssl- ...

  3. JS转码

    JS转码是解决XSS漏洞的方案,XSS漏洞是指对dom操作时,出现特殊字符造成的安全泄露. XSS漏洞的主要来源有: 1.URL(需要对url进行encodeURIComponent转码). 2.数据 ...

  4. PNG类库

    libpng depends on Zlib http://www.libpng.org/pub/png/libpng.html LodePNG http://lodev.org/lodepng/ P ...

  5. Spot光照资料

    http://forums.autodesk.com/t5/FBX-SDK/EmissiveFactor-AmbientFactor-DiffuseFactor/td-p/4230572http:// ...

  6. php基础语句2

    计算一个月有多少天 $count = date("t",strtotime("2014-09-01")); // 一个月有多少天

  7. setTimeout不断重复执行

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout(code,millisec) code  必需.要调用的函数后要执行的 JavaScript 代码串. ...

  8. 使用 trash-cli 逃出 rm 命令误删除重要文件的阴影

    今天是一个难忘的日子,当时本来想清除我们公司网站cms目录下面一些cdn推送网页后残留的垃圾文件,结果在执行rm -rf conten* 时打成了rm -rf conten *结果就悲剧了.cms目录 ...

  9. HTTP 学习

    *** *** http://www.w3school.com.cn/xml/xml_http.asp *** *** http://www.cnblogs.com/shenliang123/arch ...

  10. cas单点登录 SSO 的实现原理

    原文出处: cutesource   欢迎分享原创到伯乐头条 单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户 ...