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 弹性布局快速入门
Jun 06 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 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
PL-880隐藏功能
2021/03/01 无线电
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
django创建自定义模板处理器的实例详解
2017/08/14 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Python魔法方法详解
2019/02/13 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
基于python监控程序是否关闭
2020/01/14 Python
python支持多继承吗
2020/06/19 Python
python实现银行账户系统
2021/02/22 Python
PHP经典面试题
2016/09/03 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
银行领导证婚词
2014/01/11 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
家长对学生的评语
2014/04/18 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书