面向未来的浏览器页面跨域解决方案代码实例，
跨域杂谈
现代浏览器对于跨域限制是越来越多了，iframe中无法使用cooike等等问题，网上找了目前的写法，记录下来。
第一种的兼容性大于第二种。
window.postMessage
窗口1 端口：5050
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>主页面</h2>
<iframe id="contentIframe" src="http://localhost:5051/demo/b.html"></iframe>
</body>
<script type="text/javascript">
window.onload = function() {
console.log('window页面发送消息')
console.log(document.getElementById('contentIframe'))
document.getElementById('contentIframe').contentWindow.postMessage(
{
code: 1,
msg: 'Hello b, i am window.html'
},
"http://localhost:5051"
);
};
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin === 'http://localhost:5051') {
console.log('window页面收到消息：' + event.data.msg)
}
}, false);
</script>
</html>
窗口2 端口：5051
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<span>我是b页面</span><br>
<input type="button" value="回消息" onclick="postmsg()">
</body>
<script type="text/javascript">
let parent = null;
let origin = null;
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin === 'http://localhost:5050') {
parent = event.source
origin = event.origin
console.log('b页面收到消息：' + event.data.msg)
}
}, false);
/**
* 回消息方法
*
* 假设你已经验证了所受到信息的origin (任何时候你都应该这样做),
* 一个很方便的方式就是把event.source作为回信的对象，
* 并且把event.origin作为targetOrigin
*/
function postmsg() {
console.log('b页面回消息')
parent.postMessage({
code: 1,
msg: 'hi, i am b.html'
}, origin)
}
</script>
</html>详情文档 postMessage
Channel Messaging API
主页面
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>Channel messaging demo</title>
</head>
<body>
<h1>Channel 代码</h1>
来自子页面的消息：
<p class="output">Index页面</p>
<iframe src="page2.html" width="480" height="320"></iframe>
<script>
const channel = new MessageChannel();
const output = document.querySelector('.output');
const iframe = document.querySelector('iframe');
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
// Listen for messages on port1
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
iframe.contentWindow.postMessage("Hello from the main page!", "*", [
channel.port2,
]);
}
// Handle messages received on port1
function onMessage(e) {
output.innerHTML = e.data;
}
</script>
</body>
</html>子界面
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>My page title</title>
</head>
<body>
<h3>Iframe页面</h3>
来自主页面的消息：<p class="output">iFrame 页面</p>
<script>
const output = document.querySelector(".output");
window.addEventListener("message", onMessage);
function onMessage(e) {
output.innerHTML = e.data;
// Use the transfered port to post a message back to the main frame
e.ports[0].postMessage("Message back from the IFrame");
}
</script>
</body>
</html>详情文档 ChannelMessaging
封
面向未来的浏览器页面跨域解决方案代码实例，
https://wangijun.com/2023/11/13/other-15/