HTML Iframe 交互方法详解：跨页面通信与内容访问

HTML Iframe 交互方法详解：跨页面通信与内容访问

HTML 与 iframe 之间可以通过以下几种方式进行交互：

1. 向 iframe 发送消息：可以使用 postMessage() 方法向 iframe 发送消息。在父页面中使用该方法发送消息，iframe 页面中通过监听 message 事件来接收消息。

父页面中的代码：

var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent!', '*');

iframe 页面中的代码：

window.addEventListener('message', function(event) {
  if (event.data === 'Hello from parent!') {
    // 处理收到的消息
  }
});

2. 获取 iframe 中的内容：可以使用 contentWindow 属性来获取 iframe 的 window 对象，进而可以操作 iframe 中的内容。

var iframe = document.getElementById('myIframe');
var iframeWindow = iframe.contentWindow;

3. 在 iframe 中调用父页面中的函数：可以使用 window.parent 来调用父页面中的函数，前提是父页面中的函数需要是全局可见的。

父页面中的代码：

function parentFunc() {
  console.log('This is a function in parent page');
}

iframe 页面中的代码：

window.parent.parentFunc();

需要注意的是，由于安全原因，如果 iframe 和父页面不在同一个域下，以上方法可能会受到限制。