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跨域 postmessage,html5跨域通讯之postMessage的用法总结
postMessagePortal.html 页面代码复制代码代码如下: 标题 var targetOrigin = "http://22527.vhost20.boxcdn.cn&quo ...
html5跨域通信之postMessage
html5跨域通信之postMessage的用法不同域名下的文档因为安全问题,不允许相互之间文档的访问,但是有的时候却不得不需要这样的操作.因此我们一般可以采用 window.name,hash,或 ...
[乐意黎转载]Window.postMessage() HTML5 跨域解决方案
Hey,everybody~ 又是倒霉的跨域 T T , 有多少人死在了"说出你知道的跨域解决方案,越多越好?"这个面试问题上. 今天和大家说说,HTML5提供的一个跨域解决方案, ...
PHP-RSA加密跨域通讯实战
PHP-RSA加密跨域通讯实战 AUTH:PHILO EMAIL:lijianying12 at gmail.com 基于POST GET 的http通讯虽然非常成熟,但是很容易被人监听. 并且如果使 ...
JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
Vue跨域配置proxyTable中pathRewrite用法
跨域问题:参考平时被问到最多的问题还是关于跨域的,其实跨域问题真的不是一个很难解决的问题.这里我来简单总结一下我推荐的几种跨域解决方案. 我最推荐的也是我工作中在使用的方式就是: cors 全称为 ...
html5跨域获取页面元素,iframe嵌套页面跨域
如何用javascript 跨域获取iframe子页面的元素信息我的iframe嵌套在别人页面上,在iframe中ajax访问...以前没这问题啊,我更新了一下界面,难道是换了个jquery版本? ...
H5跨域通信 - window.postMessage
一．简介 window.postMessage is a method for safely enabling cross-origin communication. Normally, script ...
HTML5 AJAX跨域请求
方法一:HTML5新的标准中,增加了" Cross-Origin Resource Sharing"特性,这个特性的出现使得跨域通信只需通过配置http协议头来即可解决. Cros ...

html5跨域通讯之postMessage的用法

html5跨域通讯之postMessage的用法相关推荐

最新文章

热门文章