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 ...
随机推荐
- centos 7.0 安装vim
用的最小化 安装 看看跟VI命令有何区别 后面会记录使用经验 [root@localhost conf]# yum -y install vim 已加载插件:fastestmirror base | ...
- apache struts 2 任意代码执行漏洞
漏洞检测地址:http://0day.websaas.cn 漏洞利用工具,如下: 漏洞利用,如下: step1 step2 step3 提权思路,如下: 1.开启虚拟终端,执行命令,但是,提示“连接被 ...
- OS命令注入
SSL http://kb.cnblogs.com/page/162080/ http://baike.baidu.com/link?url=jPitKuDw_ncDlMbOc1SkWzM9TuKX9 ...
- 新浪微博客户端(50)-解决输入Emotion表情逐渐变小的问题
UITextView+Extension.h #import <UIKit/UIKit.h> @interface UITextView (Extension) /** 插入属性文本 */ ...
- linux 生成KEY的方法与使用
转自:http://blog.163.com/tqq_0716/blog/static/7690741220110611350344/ 服务器A: 192.168.1.1 服务器B: 192.168. ...
- Linux下的一个图形管理工具webmin
这个工具其实我在两年前的小白时期还是经常用的,因为那时候对Linux比较陌生在为数server的时候帮了我很多工作,现在周末外面下雨,闲来无事莫名其妙的想起他来. 工具优点:最大特点是他是脚本安装 不 ...
- hdu4982 Goffi and Squary Partition （DFS解法）
BestCoder Round #6 B http://acm.hdu.edu.cn/showproblem.php?pid=4982 Goffi and Squary Partition Time ...
- jQuery回调、递延对象总结（上篇）—— jQuery.Callbacks
前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数, ...
- EF-在EF中运行sql语句
DbRawSqlQuery<int> result2 = db.Database.SqlQuery<int>("SELECT count(*) FROM test.s ...
- cas
cas配置ladp地址: