js的2个iframe之间怎么调用

在JavaScript中，两个iframe之间的调用可以通过父窗口（window.parent）作为中介，使用postMessage进行跨域通信，操作共享数据结构。下面将详细介绍这两种方法及其实现细节。

一、直接通过父窗口访问

两个iframe通常存在于同一个父页面中，可以通过父窗口（window.parent）访问另一个iframe。这个方法适用于两个iframe位于同一域名的情况。

1.1 获取iframe中的元素

首先，我们需要获取另一个iframe的window对象。假设有两个iframe，分别为iframe1和iframe2，以下是获取iframe2中的元素的步骤：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe Communication</title>
</head>
<body>
  <iframe id="iframe1" src="iframe1.html"></iframe>
  <iframe id="iframe2" src="iframe2.html"></iframe>
</body>
</html>

在iframe1.html中：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe 1</title>
  <script>
    function accessIframe2() {
      var iframe2 = window.parent.document.getElementById('iframe2');
      var iframe2Window = iframe2.contentWindow;
      iframe2Window.someFunctionInIframe2(); // 调用iframe2中的函数
    }
  </script>
</head>
<body>
  <button onclick="accessIframe2()">Call Iframe 2</button>
</body>
</html>

在iframe2.html中：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe 2</title>
  <script>
    function someFunctionInIframe2() {
      alert('Function in Iframe 2 called!');
    }
  </script>
</head>
<body>
  <p>This is Iframe 2</p>
</body>
</html>

1.2 通过父窗口共享数据

如果两个iframe需要共享数据，可以利用父窗口作为中介。例如，在父窗口中定义一个共享数据结构：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe Communication</title>
  <script>
    var sharedData = {
      message: "Hello from Parent"
    };
  </script>
</head>
<body>
  <iframe id="iframe1" src="iframe1.html"></iframe>
  <iframe id="iframe2" src="iframe2.html"></iframe>
</body>
</html>

在iframe1.html中：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe 1</title>
  <script>
    function accessSharedData() {
      var sharedData = window.parent.sharedData;
      alert(sharedData.message);
    }
  </script>
</head>
<body>
  <button onclick="accessSharedData()">Access Shared Data</button>
</body>
</html>

二、使用postMessage进行跨域通信

当两个iframe位于不同的域名时，直接访问另一个iframe的window对象是不被允许的。此时，我们可以使用HTML5的postMessage方法进行跨域通信。

2.1 在父窗口中设置iframe

首先，设置两个iframe，假设它们分别位于不同的域名：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe Communication</title>
</head>
<body>
  <iframe id="iframe1" src="https://example1.com/iframe1.html"></iframe>
  <iframe id="iframe2" src="https://example2.com/iframe2.html"></iframe>
</body>
</html>

2.2 在iframe1中发送消息

在iframe1.html中，发送消息到iframe2：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe 1</title>
  <script>
    function sendMessageToIframe2() {
      var iframe2 = window.parent.document.getElementById('iframe2');
      var iframe2Window = iframe2.contentWindow;
      iframe2Window.postMessage('Hello from Iframe 1', 'https://example2.com');
    }
  </script>
</head>
<body>
  <button onclick="sendMessageToIframe2()">Send Message to Iframe 2</button>
</body>
</html>

2.3 在iframe2中接收消息

在iframe2.html中，接收来自iframe1的消息：

<!DOCTYPE html>
<html>
<head>
  <title>Iframe 2</title>
  <script>
    window.addEventListener('message', function(event) {
      if (event.origin === 'https://example1.com') {
        alert('Received message: ' + event.data);
      }
    });
  </script>
</head>
<body>
  <p>This is Iframe 2</p>
</body>
</html>

三、总结

通过以上两种方法，您可以实现两个iframe之间的相互调用和数据共享。直接通过父窗口访问适用于同域名的情况，而使用postMessage进行跨域通信则适用于不同域名的情况。在实际开发中，需要根据具体需求选择合适的方法。同时，注意在进行跨域通信时，确保消息来源的安全性，以防止潜在的安全风险。