转自: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. Java数据结构——栈

    //================================================= // File Name : Stack_demo //-------------------- ...

  2. 入门：HTML表单与Java 后台交互(复选框提交)

    仅仅给出部分关键代码: HTML form code: <form action="JavaFormTest" method="post" name=&q ...

  3. Visual Studio CLR Profiler

    http://blogs.msdn.com/b/dotnet/archive/2013/04/04/net-memory-allocation-profiling-with-visual-studio ...

  4. php 多条数据更新

    mysql更新语句很简单,更新一条数据的某个字段,一般这样写: 1 UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_va ...

  5. PHP站内搜索、多关键字、加亮显示

    php搜索代码: 搜索以PHP100开头: SELECT * FROM teble WHERE title  LIKE  'PHP100%' 搜索以PHP100结束: SELECT * FROM te ...

  6. JavaScript中原型和原型链

    原型[prototype]: 为其他对象提供共享属性的对象. 每个函数都有一个原型(prototype)属性,这个属性是一个指针,指向一个对象,这个对象包含特定实例共享的一些属性和方法. 以例服人: ...

  7. 使用 Elasticsearch ik分词实现同义词搜索（转）

    1.首先需要安装好Elasticsearch 和elasticsearch-analysis-ik分词器 2.配置ik同义词 Elasticsearch 自带一个名为 synonym 的同义词 fil ...

  8. 关于Xcode7更新之后使用 SDWebImage 图片加载不出来

    解决方法:在Info.plist中添加NSAppTransportSecurity类型Dictionary. 在NSAppTransportSecurity下添加NSAllowsArbitraryLo ...

  9. php中pdo例子

    下面是从其他博客看到的代码 <?php $dbh = new PDO('mysql:host=localhost;dbname=access_control', 'root', ''); $db ...

  10. Storm与Spark Streaming比较

    前言spark与hadoop的比较我就不多说了,除了对硬件的要求稍高,spark应该是完胜hadoop(Map/Reduce)的.storm与spark都可以用于流计算,但storm对应的场景是毫秒级 ...