iframe 获取子页面内容高度

可以通过以下代码获取子页面的内容高度：

var iframe = document.getElementById('myIFrame');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var height = iframeDocument.documentElement.scrollHeight;

其中，`myIFrame` 是子页面的 `id`。`contentDocument` 和 `contentWindow.document` 都可以获取到子页面的文档对象，不同浏览器支持的方式不同，因此需要使用 `||` 进行兼容处理。`scrollHeight` 属性可以获取文档的完整高度。

相关问题

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 内嵌页面的高度。

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

如果你在 Vue 项目中引用的 iframe 内嵌页面是外网页面，并且存在跨域情况，无法进行方法操作的话，获取 iframe 内容页面的高度会有一定的限制。

由于浏览器的同源策略，跨域的限制会阻止你直接访问 iframe 内嵌页面的 DOM 结构，因此无法直接获取其高度。

不过，你可以尝试通过间接的方式来获取 iframe 内嵌页面的高度。一种方法是使用 MutationObserver 监听 iframe 内容页面内部 DOM 结构的变化，当内容页面的高度发生变化时，可以通过 MutationObserver 进行捕获并获取新的高度。

下面是一个示例代码：

// 父页面
mounted() {
  const iframe = document.getElementById('my-iframe');
  
  // 创建 MutationObserver 实例
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'height') {
        const height = mutation.target.getAttribute('height');
        console.log(height);
        // 在这里获取到 iframe 内嵌页面的高度
      }
    }
  });

  // 监听 iframe 内容页面内部 DOM 结构变化
  observer.observe(iframe.contentDocument.documentElement, { attributes: true });
},

这段代码通过创建 MutationObserver 实例来监听 iframe 内容页面内部 DOM 结构的变化。当发生变化时，通过检查是否是 `height` 属性的变化来获取新的高度。

但需要注意的是，这种方法仅适用于一些特定的情况，且不能保证在所有浏览器和跨域情况下都有效。在某些情况下，由于跨域限制，你可能无法获取到 iframe 内嵌页面的实时高度。