主页 / 建站知识 /

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

建站知识 2021-07-02 23:00www.168986.cn长沙网站建设

postMessagePortal.html 页面代码

复制代码
代码如下:

<!DOCTYPE html>
<title>标题</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="http://apress./favicon.ico">
<script></p> <p>var targetOrigin = "http://22527.vhost20.boxcdn.";</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) {
sBlinking();
blinkTitle(message, defaultTitle);
}</p> <p>function sBlinking() {
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("sButton").addEventListener("click", sBlinking, 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./postMessageWidget.html"></iframe>
<p>
<button id="sButton">停止标题闪烁</button>
</p>

postMessageWidget.html页面的代码

复制代码
代码如下:

<!DOCTYPE html>
<title>标题</title>
<link rel="stylesheet" href="styles.css">
<script></p> <p>var targetOrigin = "http://.weixiu0376.";</p> <p>// TODO whitelist array</p> <p>function messageHandler(e) {
if (e.origin === "http://.weixiu0376.") {
document.getElementById("status").textContent = e.data;
} else {
// ignore messages from other origins
}
}</p> <p>function sendString(s) {
window..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>

上一篇：html5 Web SQL Database 之事务处理函数transaction与exe 下一篇：用canvas实现图片滤镜效果附演示

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by