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 相关文章推荐
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 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
如何正确理解PHP的错误信息
2006/10/09 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
vue中$nextTick的用法讲解
2019/01/17 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
详解numpy矩阵的创建与数据类型
2019/10/18 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
产品设计开发计划书
2014/05/07 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书