在跨域的情况下，获取 iframe 中的内容

在跨域的情况下，获取 iframe 中的内容有两种方法：

1. 使用 postMessage API：在 iframe 中设置一个 postMessage 监听器，然后在父页面中使用 postMessage 向 iframe 发送消息，iframe 收到消息后可以将内容通过 postMessage 发送回父页面，父页面再进行处理。

2. 使用代理页面：在同一域名下创建一个代理页面，该页面可以获取 iframe 中的内容，然后将内容传递给父页面。父页面可以通过在代理页面中加载 iframe 并获取内容的方式来实现。

相关问题

跨域情况下 获取iframe内部的document对象

在跨域情况下，获取iframe内部的document对象是不允许的。这是因为浏览器的同源策略限制了跨域访问。如果需要在跨域情况下获取iframe内部的document对象，可以通过在iframe所在的页面中添加一个代理页面来实现。代理页面可以通过跨域方式获取iframe内部的document对象，并将其返回给主页面。主页面可以通过与代理页面的通信来获取iframe内部的document对象。

vue项目中引用iframe，iframe内是网页，存在跨域情况，怎么获取iframe内容内嵌页面的高度

在 Vue 项目中引用 iframe 并且存在跨域情况时，要获取 iframe 内嵌页面的高度，你可以使用 postMessage 方法来实现跨域通信。

首先，在父页面中，你需要监听 iframe 的加载完成事件，并在该事件中发送一个 postMessage 给 iframe 内嵌页面：

// 父页面
mounted() {
  const iframe = document.getElementById('my-iframe');

  iframe.addEventListener('load', () => {
    iframe.contentWindow.postMessage('getIframeHeight', '*');
  });

  window.addEventListener('message', this.handleMessage);
},
methods: {
  handleMessage(event) {
    if (event.data && event.data.type === 'iframeHeight') {
      const height = event.data.height;
      // 在这里获取到 iframe 内嵌页面的高度
      console.log(height);
    }
  }
}

在内嵌的 iframe 页面中，你需要监听父页面发送过来的 postMessage，并在收到消息时获取 iframe 页面的高度，并将高度通过 postMessage 发送回父页面：

// iframe 内嵌页面
window.addEventListener('message', (event) => {
  if (event.data === 'getIframeHeight') {
    const height = document.documentElement.scrollHeight;
    parent.postMessage({ type: 'iframeHeight', height }, '*');
  }
});

这样，当 iframe 加载完成后，父页面会发送一个消息给 iframe 内嵌页面，内嵌页面接收到消息后获取高度并发送回父页面，父页面再接收到消息后即可获取到 iframe 内嵌页面的高度。