[读书笔记]Communication API

最新推荐文章于 2024-10-29 23:43:21 发布

sun_7_flower

最新推荐文章于 2024-10-29 23:43:21 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5学习笔记

本文链接：https://blog.youkuaiyun.com/sun_7_flower/article/details/40428963

HTML5学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍跨文档消息通信的概念与实现方法，并通过企鹅聊天模拟演示了两个源之间的安全通信过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 跨文档消息通信

跨文档消息通信可以确保iframe、标签页、窗口间安全地进行跨源通信。

posetMessage API 发送小心

chatFrame。contentwindow.postMessage("hello world", "http://www.example.com/")

接受消息需在页面增加一个事件处理函数。当某个消息到达时，通过检查消息的来源（origin）

来决定是否对这条消息进行处理。

window.addEventListener("message", messageHandler, true)

function messageHandler(e) {

switch(e.origin) {

case "friend.example.com":

processMessage(e.data);

break;

default:

break;

}

1.2 理解源

源由规则（scheme）、主机（host）、端口（port）组成。

1.3 使用postMessage API

模拟qq聊天，两个源之间的通信: 闪烁显示有信息来了。

one_communication.html：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p >网络地址：http://localhost:8888 </p >

<div >

<span id ="statusChange" style="color: blue">等待企鹅妹妹的消息中... </span > <br />

</div >

<div >

</div >

</div ><br />

<div >

<p >发送消息给企鹅妹妹: </p >

</div >

<br />

</body>

</html>

one_communication.js：

var notificationTimer = null;

var trustedOrigin = "http://localhost:9999" ;

//消息处理函数

function messageHandler(e) {

if (e.origin == trustedOrigin) {

notify(e.data);

} else {

//忽略其他源发来的消息

}

function notify(message) {

stopBlinking();

if (message != "" ) {

message = "企鹅妹妹：" + message;

$( "#receiveMsg").val($( "#receiveMsg").val() + "<br/>" + message);

blinkMsg( "blue", "red");

}

//停止闪烁

function stopBlinking() {

if (notificationTimer !== null) {

clearTimeout(notificationTimer);

}

//闪烁

function blinkMsg(col_1, col_2) {

$("#statusChange").html( "企鹅妹妹来消息啦" );

$("#statusChange").css( "color", col_1);

notificationTimer = setTimeout(blinkMsg, 1000, col_2, col_1);

}

//发送消息

function sendMessage() {

var message = $( "#message").val();

document.getElementById( "widget").contentWindow.postMessage(message, trustedOrigin);

$("#message").val( "");

}

//读消息

function readMessage() {

stopBlinking();

$("#receiveAllMsg").append($( "#receiveMsg").val());

$("#receiveMsg").val( "");

$("#statusChange").html( "等待企鹅妹妹的消息中..." );

("#statusChange").css( "color", "blue");

}

$(function () {

$("#sendMsg").bind( "click", sendMessage);

$("#readMsg").bind( "click", readMessage);

//绑定消息接收的监听器

window.addEventListener( "message", messageHandler, true);

});

the_other_communication.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p >网络地址: http://localhost:9999 </p >

<p >企鹅哥哥的留言： <strong id ="receiveMsg"></ strong></ p>

<div >

<button id ="sendMsgBtn">发消息给企鹅哥哥</button >

</div >

</body>

</html>

the_other_communication.js

var trustedOrigin = "http://localhost:8888" ;

function messageHandler(e) {

if (e.origin === trustedOrigin) {

$( "#receiveMsg").html(e.data);

} else {

//忽略其他源发来的消息

}

$(function () {

$("#sendMsgBtn").click( function () {

var msg = $( "#sengMsg").val();

if (msg != "") {

window.top.postMessage(msg, trustedOrigin);

}

$( "#sengMsg").val( "");

});

window.addEventListener( "message", messageHandler, true);

});

1.4 搭建以上代码运行代码

1）安装python2.7，非3.x版本。

2）运行web服务器

python -m SimpleHTTPServer 8888

python -m SimpleHTTPServer 9999

3）Firefox上运行http://localhost:8888/one_communication.html

1.5 运行效果