转自: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. 用jackson封装的JSON工具类

    package hjp.smart4j.framework.util; import com.fasterxml.jackson.databind.ObjectMapper; import org.s ...

  2. HTML+JS+DOM【选项卡自动切换】

    最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...

  3. 以全局监听的方式处理img的error事件

    http://www.ovaldi.org/2015/09/11/%E4%BB%A5%E5%85%A8%E5%B1%80%E7%9B%91%E5%90%AC%E7%9A%84%E6%96%B9%E5% ...

  4. yourphp读取不到hits

    源代码 <YP:list name="Article" order="id desc" catid="37" limit=" ...

  5. Only one statement is allowed per batch. A batch separator, such as 'GO', might be required between statements.

    When I added the file in VS I forgot to set Build Action = None from the file properties.

  6. CentOS下nginx简单安装

    说明:环境 系统:Centos 6 软件包:nginx-1.2.4 配置系统yum源 #/etc/yum.repos.d/ #rm -rf ./* vi localhost.repos.d [yumy ...

  7. mysql dumpfile与outfile函数的区别

    一直以为两个函数作用是相同的   经过简单测试发现还是有些区别的   如下表admin   mysql> select * from admin;   +-----+-----------+-- ...

  8. HighCharts选项和参数详细配置查询表

    概述:作为一款出色的交互图表制作工具,HighCharts有着全面的选项.参数等配置信息.为了帮助大家进一步掌握HighCharts,今天我们为大家整理了HighCharts的所有配置信息和说明,将其 ...

  9. [转载]解析用户生命周期价值：LTV

    http://www.sykong.com/2014/07/23144 http://youxiputao.com/articles/1288 http://www.woshipm.com/opera ...

  10. 利用flexbox实现按字符长度排列dom元素

    说明:请使用chrome浏览器打开 See the Pen pvyjGV by lilyH (@lilyH) on CodePen. 如上图所示,我们你要实现的效果就是,(1)在一行中显示两块元素:( ...