我有两个不同来源的网站。让它成为foo.com和bar.com。站点foo.com通过BroadcastChannel以'payment-info'名称发送消息。我还有一个iframe，托管在foo.com上，内置在bar.com中。下面是iframe代码：
<html><head><script type="text/javascript">
(function () {
const bc = new BroadcastChannel('payment-info');
bc.addEventListener('message', (m) => {
const data = JSON.parse(m.data);
data.channel = 'payment-info';
if (window.top !== window) {
window.top.postMessage(JSON.stringify(data), '*');
}
});
})();
</script></head><body></body></html>字符串
所以iframe订阅了'payment-info'广播频道，当它被触发时，iframe会向它的父窗口（也就是bar.com）发布一条消息，其中包含一些信息。
在bar.com端，我只是监听'message'事件，并使用JSON调用'receiveMessage'函数。
window.addEventListener('message', function (message) {
receiveMessage(message);
});型
预计它可以在所有浏览器中在我的网站bar.com上工作。它不能在Safari和Firefox中工作，但可以在Chrome中工作。
我将index.html、index2.html和iframe.html的几个文件中的代码合并在一个文件中，我曾在本地测试过它们。index.html和iframe.html被认为是来自一个源，而index2.html来自另一个源。不幸的是，如果没有两个不同的服务器和不同的域，就不可能像普通的HTML/JS一样测试它们。
<!--INDEX CODE-->
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<p>index page</p>
<a href="/page.html">link</a>
<script>
let i = 0;
const bc = new BroadcastChannel('payment-page');
function sendItem() {
i+=1;
const message = '{"message":"Hello from the new window!"}';
if (window.opener) window.opener.postMessage(message, '*');
const data = { message: `Hello from broadcast ${i}` };
console.log(JSON.stringify(data));
bc.postMessage(JSON.stringify(data))
console.log(message)
}
</script>
<button onclick="sendItem()">send item</button>
</body>
</html>
<!--END OF INDEX CODE-->
<!--IFRAME CODE-->
<html><head><script type="text/javascript">
(function () {
const bc = new BroadcastChannel('payment-page');
console.log('broadcast channel is created', bc)
bc.addEventListener('message', (m) => {
console.log('proxy: receive message ', m);
const data = JSON.parse(m.data);
data.channel = 'payment-page';
if (window.top !== window) {
// Inside iframe. Proxy to top.
console.log('proxy: send to parent');
window.top.postMessage(JSON.stringify(data), '*');
}
});
})();
</script></head><body></body></html>
<!--END OF IFRAME-->
<!--INDEX2 CODE-->
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe
width="100"
height="100"
src="http://domain-1.com:3000//iframe.html"
></iframe>
<script>
window.addEventListener('message', function (message) {
if (message.data && typeof message.data === 'string') {
console.log(JSON.parse(message.data))
}
});
</script>
</body>
</html>型
1条答案
按热度按时间8aqjt8rx1#
广播通道只在相同来源的页面之间工作。
Broadcast Channel API允许浏览上下文（即，窗口、选项卡、框架或iframe）与同一源上的worker之间进行基本通信。
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API