iframe之间的通信

前言

iframe 想必大家都挺熟悉的了，就不多说了👍👍。写这篇文章的初衷主要是丰富自己的知识和解决遇到的问题。因为我基本上没接触过 iframe ，所以对它的通信方式不是很了解。前几天，跟我的一个朋友（在下杨公子）聊天时，他提到了 iframe 的通信方式，我觉得很有意思，就开始了解和学习。在这篇文章中，我将分享我所学到的内容，希望对大家有所帮助🤪🤪。

接下来我们就一起来学习一下关于 iframe 通信的相关知识吧😁

iframe通信的几种方式😶‍🌫️😶‍🌫️

1. 
   
2. URL 传参：父窗口可以通过在 iframe 的 src 属性后添加参数来向子窗口传递数据，子窗口可以通过 location.search 或 location.hash 来获取参数✨✨。
   

• 
  
• 使用 ? 拼接参数，子页面使用 location.search 接收参数
  

// parent.html

<iframe id="iframe1" src="./child1.html?name=来自parent的消息" frameborder="0"></iframe>

// child1.html
<script>
console.log(window.decodeURIComponent(location.search)) // ?name=来自parent的消息
</script>

• 
  
• 使用 # 拼接参数，子页面使用 location.hash 接收参数，同时还可以使用 window.onhashchange 来监听参数的变化。
  

// parent.html

<iframe id="iframe1" src="./child1.html#name=来自parent的消息" frameborder="0"></iframe>
<script>
const iframe1 = document.getElementById('iframe1')
// 在2s后更改hash
setTimeout(() => {

    iframe1.src = './child1.html#age=12'

}, 2000)
</script>

// child1.html
<script>
console.log('hash', window.decodeURIComponent(location.hash)) // #name=来自parent的消息
window.onhashchange = () => {
console.log('hashchange', window.location.hash) // #age=12

}
</script>

⚡⚡需要注意的是通过 URL 传参 的时候，传输携带中文的话，记得使用 decodeURIComponent 进行解码。

2. 
   
3. window.postMessage：安全、可靠且支持跨域的 iframe 通信方式，它可以在两个窗口之间异步传递消息✨✨✨✨✨。
   

• 
  
• 在发送方中，使用 window.postMessage() 方法向另一个窗口发送消息。该方法接收两个参数：要发送的消息和目标窗口的源（例如，"http://127.0.0.1:5500/child.html" 或 "*"）。
  

window.postMessage('Hello world!', 'http://127.0.0.1:5500/child.html')

• 
  
• 在接收方中，使用 window.addEventListener() 方法监听 message 事件。该事件对象包含三个属性：data 表示接收到的数据，origin 表示发送方的源，source 表示发送方窗口的引用。
  

window.addEventListener('message', function(event) {
// 判断消息是否来自可信任的源
if (event.origin === 'http://127.0.0.1:5500/child.html') {
console.log('message: ' + event.data)

  }

})

兼容性，来自 window.postMessage | MDN

3. 
   
4. window.name：可以使用一个隐藏的iframe和window.name属性在不同的窗口之间共享数据✨✨。
   

• 
  
• 在子页面中，将要传递给父页面的数据保存在 window.name 属性中。
  

例如

window.name = 'Hello Parent!';

• 
  
• 在父页面中，创建一个隐藏的 iframe 元素，并且将其源设置为子页面的 URL。
  

const iframe = document.createElement('iframe');

iframe.style.display = 'none';

iframe.src = 'http://127.0.0.1:5500/child1.html';
document.body.appendChild(iframe);

• 
  
• 在父页面中，等待 iframe 加载完成后，通过访问 iframe.contentWindow.name 属性来获取子页面中保存的数据。
  

iframe.onload = function() {
const childData = iframe.contentWindow.name;

   onsole.log('message:', childData); // 输出：message: Hello Parent!

};

⚡⚡注意：使用 window.name 进行跨域 iframe 通信存在安全性问题，因为所有具有相同名称的窗口都可以访问和修改 window.name。

4. 
   
5. 服务器端转发：可以将消息从一个iframe发送到服务器，然后再由服务器将其转发到另一个iframe。✨✨✨
   

博客主要记录一些学习的文章，如有不足，望大家指出，谢谢。