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制作网站后台管理面板
Dec 30 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php session 预定义数组
2009/03/16 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
js定时器(执行一次、重复执行)
2014/03/07 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
详解Python 循环嵌套
2020/07/09 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
公司副总经理任命书
2014/06/05 职场文书
党员民主评议自我评价
2014/10/20 职场文书
施工安全员岗位职责
2015/04/11 职场文书
任命通知范文
2015/04/21 职场文书
2015年加油站工作总结
2015/05/13 职场文书
在职证明书模板
2015/06/15 职场文书
2016公司中秋节寄语
2015/12/07 职场文书