html5跨域通讯之postMessage的用法
转自: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的用法的更多相关文章
- HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- iframe跨域通讯
工作中遇到一个问题,IFRAME嵌套了一个外部页面用于统计 统计的JS由我们提供,并且需要提供热点图 一开始就碰到的问题就是 不知道页面高度 需要子页面传回页面高度用于将IFRAME拉升到合适高度 当 ...
- XDomainRequest IE8&IE9 cors 跨域通讯的处理方法
版权声明:避免百度一下通片同一篇文章,未经博主允许不得转载.本博客作为笔记使用,正确性请自行验证. https://blog.csdn.net/u014071104/article/detail ...
- html5跨域数据传递（postMessage）
在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...
- JavaScript 跨域：window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- Html5 跨域通信
H5 跨域通信: 在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息. 1 <!DOCTYPE html> 2 ...
- 跨域通信--Window.postMessage()
一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...
- iframe中子父页面跨域通讯
目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...
- HTML5跨域请求--POST方式
var xmlHttp; // Create the XHR object. function createCORSRequest(method, url) { var xhr = new XMLHt ...
随机推荐
- Axure7.0汉化方法
下载汉化包 AxureRP7CN_汉化包.rar 首先退出正在运行中的 Axure (如果您正在使用). 将 汉化包.rar 文件解压, 得到 lang 文件夹, 然后将其复制到 Axure 安装目 ...
- dig的用法
Dig是linux中的域名解析工具,功能比nslookup强很多,使用也很方便,不用象nslookup总是set不停. Dig是domain information groper的缩写,知道了来源想必 ...
- 自然语言19_Lemmatisation
QQ:231469242 欢迎喜欢nltk朋友交流 https://en.wikipedia.org/wiki/Lemmatisation Lemmatisation (or lemmatizatio ...
- 根据wsdl文件生成webservice 的.cs文件 及 生成dll C#调用
Visual Studio 2013->Visual Studio Tools->VS2013 开发人员命令提示 命令行输入 wsdl E:\WS.wsdl /out ...
- winSocket数据传输
服务器端: #include <WINSOCK2.H> #include <stdio.h> #pragma comment(lib,"ws2_32.lib" ...
- 网页js，DIV全屏布局
<script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); ...
- 详细整合教程（Spring+SpringMVC+MyBatis）
详细整合教程(Spring+SpringMVC+MyBatis) http://blog.csdn.net/gebitan505/article/details/44455235/
- js实现点击增加文本输入框
html代码: <ul id="ulid21" > <li id="li11" >问卷选项设置:</li> </ul& ...
- 【phpcms-v9】phpcms-v9二次开发所必须知道的步骤(转载)
一.做phpcms-v9二次开发时,我们经常需要用到如下代码,所以有必须在这里注释说明一下 defined('IN_PHPCMS') or exit('No permission resources. ...
- hibernate4中取得connection的方法
在hibernate3中,使用了c3p0连接池,尝试了多种办法取得connection对象,以下两种可以使用. Java代码 Connection conn; // 方法1:hibernate4中将 ...