分享更有价值
被信任是一种快乐

html5的postMessage如何使用

文章页正文上

这篇文章主要讲解了“html5的postMessage如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5的postMessage如何使用”吧!
代码如下:

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 fro免费云主机、域名m 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);
传递信息:

postMessageWidget.html页面的代码
复制代码
代码如下:

var targetOrigin = “http://www.weixiu0376.cn”;// TODO whitelist arrayfunction 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);
显示接收信息:



感谢各位的阅读,以上就是“html5的postMessage如何使用”的内容了,经过本文的学习后,相信大家对html5的postMessage如何使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是云技术,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: CSS3的Media Queries实例分析

这篇“CSS3的Media免费云主机、域名 Queries实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS3的Media Queri…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册