postMessage在Iframe中跨越的应用实例。在a.html（域名：127.0.0.1:9990）中通过iframe引用域名不同的b.html（域名：127.0.0.1:9989）进行通信。
应用
客户环境访问我们的html实现单点登录。主要过程是：客户访问我们的html（b.html），在html中我们通过与客户的html（a.html）通信，获取客户当前系统的token后，调用后端开发写的接口实现登录。
主要分三步：
1. b.html给a.html发送信息‘ok’，告诉a.html已经准备好接收token
2. a.html接收到‘ok’后，给b.html发送token
3. b.html接收到token后，调用后端接口
效果
附上源码
a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>client</button>
<div>
<iframe src="http://127.0.0.1:9989" frameborder="0"></iframe>
</div>
<script>
window.addEventListener('message', recriveMessage);
function recriveMessage (event) {
if(event.origin != 'http://127.0.0.1:9989') {
return;
}
console.log('接收到的信息:', event.data);
if(event.data === 'ok') {
event.source.postMessage('token: xxxx', event.origin);
}
}
</script>
</body>
</html>
b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
top.postMessage('ok', 'http://127.0.0.1:9990');
window.addEventListener('message', recriveMessage);
function recriveMessage (event) {
if(event.origin != 'http://127.0.0.1:9990') {
return;
}
console.log('接收到的token信息:', event.data);
}
</script>
</body>
</html>
1767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
