转自: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. ioctlsocket()

    ioctlsocket()是控制套接口的模式. 外文名 ioctlsocket() 含    义 控制套接口的模式 头文件 #include <winsock.h> 性    质 函数 目 ...

  2. linux中快速清空文件内容的几种方法

    这篇文章主要介绍了linux中快速清空文件内容的几种方法,需要的朋友可以参考下 $ : > filename $ > filename $ echo "" > f ...

  3. AspNetUsers

    public class CanDooDbContext : DbContextBase<CanDooDbContext> { protected override void OnMode ...

  4. DELL服务器引导光盘图片及下载链接

    DELL服务器引导光盘图片及下载链接 所有的下载地址均是ftp开头的,下载时,请 拷贝下载地址,然后放到浏览器的地址栏进行下载! 各个下载地址汇总: http://search.dell.com/re ...

  5. ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素

    阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Bootstrap 验证样式 ASP.NET MVC创建包含Bootstrap样式编辑模板 小结 Bootstra ...

  6. C#中(int)a和Convert.ToInt32(a)有什么区别

    首先,在 C# 中,int 其实就是 System.Int32,即都是32位的. 其次,(int) 和 Convert.ToInt32 是两个不同的概念,前者是类型转换,而后者则是内容转换,它们并不总 ...

  7. [Mongodb]删除指定字段

    摘要 如果想要删除mongodb中一个document的某个字段,该如何做呢? 方法模版 db.user.update({"email_state":{"$exists& ...

  8. str_replace vs preg_replace

    转自:http://benchmarks.ro/2011/02/str_replace-vs-preg_replace/ 事实证明str_replace确实比preg_replace快. If you ...

  9. css+html 总结+归纳

    趁着清明的3天时间,我专门看了xhtml的一套视频,虽然是xhtml但是也隐喻了很多经验,巩固了一下自己的基础,我自己也写了很多大大小小的东西,但是越写我越发觉自己基础的薄弱,果然没错!还是学到了一些 ...

  10. mongodb_修改器（$inc/$set/$unset/$push/$pop/upsert......）

    主从复制:http://blog.csdn.net/drifterj/article/details/7833883 对于文档的更新除替换外,针对某个或多个文档只需要部分更新可使用原子的更新修改器,能 ...