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 ...
随机推荐
- ubuntu下samba服务器的安装与配置
参考网址:http://jingyan.baidu.com/album/00a07f38b9194082d028dc08.html?picindex=9 sudo service smbd resta ...
- 一台机子上运行使用不同Java版本的多个tomcat
方法 在tomcat/bin/下创建setenv.sh并写入 export JAVA_HOME=/usr/share/jvm/jdk1..0_91 When you starting tomcat u ...
- JQM弹出对话框
<div data-role="page" id="pageone"> <div data-role="header"&g ...
- Jquerymobile 简单安装
需要导入三个文件jquery,jquerymobile,css(jquerymobile地址:http://jquerymobile.com/) <script src="js/jqu ...
- 序列化与反序列化成XML
http://blog.itpub.net/12639172/viewspace-490786/ 现在XML都普遍的用到了很多地方,它的平台无关.方便.结构化.适用性的特点让人不得不去接受它,在C#中 ...
- JS获取当前对象大小以及屏幕分辨率等...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...
- Mac常用命令
~ 当前所在目录# 超级用户提示符$ 普通用户提示符 Alfred2 //呼出 option + space rm -rf //删除文件夹pwd //打印当前目录 print working dire ...
- Yii2.0高级框架数据库增删改查的一些操作（转）
yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 --------------------------- ...
- ASP.NET MVC5 Filter重定向问题
ASP.NET MVC5 Filter重定向问题 一.问题描述 1.在Filter中使用直接filterContext.RequestContext.HttpContext.Response.Redi ...
- SQL having 子句
1.为什么存在? 在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与合计函数一起使用. 2.举例子: SELECT Customer,SUM(OrderPrice) FROM Or ...