iframe 互相调用js

基础概念

iframe 是 HTML 中的一个元素，用于在当前网页中嵌入另一个 HTML 文档。通过 iframe，可以在一个页面中加载并显示另一个独立的网页。iframe 之间的 JavaScript 调用涉及到跨文档消息传递（Cross-Document Messaging），通常使用 window.postMessage 方法来实现安全通信。

类型

同源策略：如果两个 iframe 的源（协议、域名、端口）相同，则可以直接访问对方的 DOM 和 JavaScript 对象。
跨域策略：如果两个 iframe 的源不同，则需要使用 window.postMessage 进行安全通信。

应用场景

微前端架构：将大型应用拆分为多个小型应用，每个应用通过 iframe 嵌入主页面。
第三方广告嵌入：在不信任的第三方网站上嵌入广告时，使用 iframe 可以提高安全性。
嵌入式表单和工具：如地图、社交媒体插件等。

示例代码

同源策略下的互相调用

假设两个 iframe 都在同一个域名下：

<!-- 父页面 -->
<iframe id="iframe1" src="page1.html"></iframe>
<iframe id="iframe2" src="page2.html"></iframe>

<script>
  const iframe1 = document.getElementById('iframe1').contentWindow;
  const iframe2 = document.getElementById('iframe2').contentWindow;

  iframe1.sayHello = function() {
    console.log('Hello from iframe1');
  };

  iframe2.sayHello = function() {
    console.log('Hello from iframe2');
  };

  // 调用 iframe1 中的方法
  iframe1.sayHello();
  // 调用 iframe2 中的方法
  iframe2.sayHello();
</script>

跨域策略下的互相调用

假设 iframe1 在 example.com 域名下，iframe2 在 anotherdomain.com 域名下：

<!-- example.com/page1.html -->
<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://anotherdomain.com') return;
    console.log('Message received:', event.data);
  });

  function sendMessage() {
    window.parent.postMessage('Hello from iframe1', 'https://anotherdomain.com');
  }
</script>
<button onclick="sendMessage()">Send Message</button>

<!-- anotherdomain.com/page2.html -->
<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://example.com') return;
    console.log('Message received:', event.data);
  });

  function sendMessage() {
    window.parent.postMessage('Hello from iframe2', 'https://example.com');
  }
</script>
<button onclick="sendMessage()">Send Message</button>

遇到的问题及解决方法

问题：跨域通信时出现安全警告或无法接收消息

原因：可能是由于 postMessage 的目标源设置不正确，或者事件监听器的源验证不严格。

解决方法：

确保目标源正确：在调用 postMessage 时，明确指定目标源。
严格验证事件源：在接收消息时，始终检查 event.origin 是否为预期的源。

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://expected-origin.com') return; // 严格验证源
  console.log('Message received:', event.data);
});

通过以上方法，可以确保 iframe 之间的 JavaScript 调用既安全又可靠。