html5跨域通讯之postMessage的用法总结


Posted in HTML / CSS onNovember 07, 2013

postMessagePortal.html 页面代码

复制代码
代码如下:

<!DOCTYPE html>
<title>标题</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="http://apress.com/favicon.ico">
<script></p> <p>var targetOrigin = "http://22527.vhost20.boxcdn.cn";</p> <p>var defaultTitle = "Portal";
var notificationTimer = null;</p> <p>function messageHandler(e) {
if (e.origin == targetOrigin) {
notify(e.data);
} else {
// ignore messages from other origins
}
}</p> <p>function sendString(s) {
document.getElementById("widget").contentWindow.postMessage(s, targetOrigin);
}</p> <p>
function notify(message) {
stopBlinking();
blinkTitle(message, defaultTitle);
}</p> <p>function stopBlinking() {
if (notificationTimer !== null) {
clearTimeout(notificationTimer);
}
document.title = defaultTitle;
}</p> <p>function blinkTitle(m1, m2) {
document.title = m1;
notificationTimer = setTimeout(blinkTitle, 1000, m2, m1)
}</p> <p>function sendStatus() {
var statusText = document.getElementById("statusText").value;
sendString(statusText);
}</p> <p>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);</p> <p></script></p> <p><h1>跨域通讯</h1>
传递信息:<input type="text" id="statusText" value="Online">
<button id="sendButton">确定</button>

<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></p> <p>var targetOrigin = "http://www.weixiu0376.cn";</p> <p>// TODO whitelist array</p> <p>function messageHandler(e) {
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById("status").textContent = e.data;
} else {
// ignore messages from other origins
}
}</p> <p>function sendString(s) {
window.top.postMessage(s, targetOrigin);
}</p> <p>function loadDemo() {
document.getElementById("actionButton").addEventListener("click",
function() {
var messageText = document.getElementById("messageText").value;
sendString(messageText);
}, true);</p> <p>}
window.addEventListener("load", loadDemo, true);
window.addEventListener("message", messageHandler, true);</p> <p></script>
<p>显示接收信息: <strong id="status"></strong><p>
<div>
<input type="text" id="messageText" value="填写消息内容">
<button id="actionButton">发送消息</button>
</div>
HTML / CSS 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 #HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 #HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 #HTML / CSS
html5开发之viewport使用
Oct 17 #HTML / CSS
HTML5计时器小例子
Oct 15 #HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 #HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 #HTML / CSS
You might like
如何让CI框架支持service层
2014/10/29 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python实现购物车购物小程序
2018/04/18 Python
Windows下python3.6.4安装教程
2018/07/31 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
什么是设计模式
2012/06/17 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
高中生的学习总结自我鉴定
2013/10/26 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
九九重阳节标语
2014/10/07 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
幼儿园辞职书
2015/02/26 职场文书
预备党员党支部意见
2015/06/02 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android