哈喽哈喽这里是小菜不拖延博主，博主在看资料的时候，看到了一个‘如何在不同域名之下实现单点登录’，她所采用的方法有iframe+postMessage(原谅无知博主第一次听说),本来是想通过此方法传递token的，不料却发现了······
实现代码
父html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Window</title>
</head>
<body>
<!-- 嵌套的 iframe，每个 iframe 有不同的域 -->
<iframe id="iframe1" src="http://localhost:5501/test.html" width="400" height="300"></iframe>
<script>
const iframes = document.querySelectorAll('iframe');
const token = 'your_shared_token';
// 向每个 iframe 发送共享的 Token
function sendTokenToIframes() {
iframes.forEach(iframe => {
iframe.contentWindow.postMessage(token, iframe.src);
});
}
// 在加载完成后发送 Token
iframes.forEach(iframe => {
iframe.onload = sendTokenToIframes;
});
</script>
</body>
</html>
子html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Window</title>
</head>
<body>
<script>
// 监听来自父窗口的消息
window.addEventListener('message', function(event) {
// 验证消息来源是否是预期的
if (event.origin === 'http://127.0.0.1:5501') {
// 处理收到的消息
const receivedToken = event.data;
console.log('Received token:', receivedToken);
}
});
</script>
</body>
</html>
注意：
- 两段代码请使用live，不要本地open，file好像不支持这个
问题
在child当中打印evemnt.origin,显示的是5501，而不是父窗口的5500
笑鼠，到后面发现问题了，我用event.origin==5000的时候，我发现没有数据，然后回到父窗口，我才发现，打印结果跑到父窗口了（博主没用过iframe真的不了解，别骂），所以这里他event.orgin==5501其实是浏览器，浏览器的请求，
现象
好，我们暂且搁置刚刚的问题，我们就写5501，让他先接收到参数，打印的data如下，我会发现，欸，熟悉的的syn，ack：
-
target： 该属性表示消息的目标，即接收消息的窗口或脚本的标识。在这里，目标是 'metamask-contentscript'。这可能与一些浏览器扩展或插件（如 MetaMask）有关。
好啊，博主心头一惊，这不是我的小狐狸扩展吗，原来如此，他一直在运行，我说哪里来的数据，我把小狐狸一关，果然没有数据了
最后
那么围绕在博主心里还有两个疑惑
- 为啥会输出数据SYN、ACK(这不是建立TCP连接的时候出现的吗)
- 第二如何让子窗口的打印结果出现在子窗口
- （好好好，是不是被博主骗进来答疑了，哈哈哈哈）
