iframe在同源和不同源的情况下如何进行通讯？
同源
a页面(父页面）
<body>
<div>
<h1>我是父页面</h1>
<iframe id="bFrame" src="./b.html" frameborder="no"></iframe>
<button id="btn">获取子页面数据</button>
</div>
</body>
<script>
window.onload = function () {
document.getElementById("btn").onclick = function () {
//获取iframe标签
let bFrame = document.getElementById("bFrame");
//通过contentWindow获取子页面的数据
console.log(
bFrame.contentWindow.document.querySelector("h1").innerHTML
);
};
};
</script>
b页面(子页面)
<body>
<div>
<h1>我是子页面</h1>
<button id="btn">获取父页面数据</button>
</div>
</body>
<script>
window.onload = function () {
document.getElementById('btn').onclick = function() {
//通过window.parent获取到父页面
console.log(window.parent.document.querySelector('h1').innerHTML)
}
}
</script>
不同源
a页面(父页面)
<body>
<h1>我是父页面</h1>
<iframe id="bFrame" src="http://127.0.0.1:5501/b.html" frameborder="no"></iframe>
<button id="btn">给子页面发消息</button>
</body>
<script>
window.onload = function() {
// 给子组件传递数据
document.getElementById('btn').onclick = function() {
// 先拿到iframe标签 获取contentWindow
let bFrame = document.getElementById('bFrame')
bFrame.contentWindow.postMessage('父组件----->子组件','http://127.0.0.1:5501')
}
// 接收子组件的数据
window.onmessage = function(e) {
console.log(e.data);
}
}
</script>
b页面(子页面)
<body>
<h1>我是子页面</h1>
<button id="btn">点击给父页面发消息</button>
</body>
<script>
window.onload = function() {
document.getElementById('btn').onclick = function() {
//拿到a页面的window 通过postMessage发送数据
window.parent.postMessage('子组件---->父组件','http://127.0.0.1:5500')
}
// 接收父页面的数据
window.onmessage = function(e) {
console.log(e.data);
}
}
</script>
父页面给子页面传输时
先拿到iframe标签，然后通过contentWindow.postMessage给子页面传输数据，第一个参数是要传输的数据，第二个参数是子页面的域名地址
子页面给父页面传输时
先通过window.parent拿到父页面的window，再通过window.parent.postMessage给父页面传输数据，第一个参数是要传输的数据，第二个参数是父页面的域名地址
