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="/UploadFiles/2021-03-30/postMessageWidget.html"><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>
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 《星舰铳犬太阳系物语》游戏背景介绍
- 《战锤40K星际战士2》终极版有后续DLC说明
- 《第9层》游戏特色玩法介绍
- 刀郎.2006-刀郎【九雨天下】【WAV+CUE】
- 59.9高校生.1994-素兰万岁【上华】【WAV+CUE】
- ECHO.1991-你是爱我还是需要我(国专)【EMI百代】【WAV+CUE】
- 交错战线零课主线困难通关阵容推荐一览
- 交错战线挖掘矿场角色推荐攻略
- 命运圣契公测平民阵容怎么搭配 新手开荒平民阵容攻略
- 金梅《现代发烧的声音2》发烧碟[WAV+CUE]
- 雨果唱片-《历史录音珍藏系列-现代芭蕾舞剧·红色娘子军》2CD【WAV】
- [雨果唱片]李冰《地方民歌·戏曲系列-爱的颂歌》WAV
- 《模拟人生》真人电影官宣!玛格特·罗比担任制片人
- 《星战绝地》系列玩家数超4000万!续作表现超预期
- EA称AI是其业务核心!能提高开发效率、节约成本