vue项目， iframe.onload中 iframeWin.document.getElementById('viewer').scrollHeight仍旧为空

您好！对于您描述的问题，可能存在以下几个可能的原因：

1. 加载的页面中没有具有 "viewer" id 的元素：请确保在 iframe 中的页面中存在一个具有 "viewer" id 的元素。如果没有该元素，那么使用 getElementById('viewer') 将返回 null。

2. iframe 加载的页面还未完全加载完毕：在 iframe 的 onload 事件中获取元素的高度时，确保 iframe 加载的页面已经完全加载完毕。可以使用 iframe 的 onreadystatechange 事件来监听页面加载状态，确保在页面加载完成后再获取元素的高度。

3. 跨域问题：如果 iframe 加载的页面与父页面不属于同一个域，那么可能存在跨域问题。浏览器的同源策略会限制跨域访问，您需要确保 iframe 加载的页面与父页面属于同一个域。

请检查上述几个可能的原因，看看是否可以解决您遇到的问题。如果问题仍然存在，请提供更多相关代码和错误信息，以便我们更好地帮助您解决问题。

相关问题

vue中document.getElementById中document报红

在Vue中，使用document.getElementById()方法时，可能会出现document报红的情况。这是因为Vue使用了虚拟DOM来管理和更新页面的元素，而不是直接操作原生的DOM元素。因此，直接使用document.getElementById()方法可能无法获取到Vue渲染后的DOM元素。

为了解决这个问题，可以使用Vue提供的$refs属性来获取DOM元素。$refs属性是一个对象，其中包含了通过ref属性标记的DOM元素。通过在需要获取的元素上添加ref属性，然后在Vue实例中使用this.$refs来访问该元素。

下面是一个示例代码：

<template>
  <div>
    <div ref="myElement">Hello Vue!</div>
    <button @click="getElement">获取元素</button>
  </div>
</template>

<script>
export default {
  methods: {
    getElement() {
      let element = this.$refs.myElement;
      console.log(element); // 输出获取到的DOM元素
    }
  }
}
</script>

在上面的代码中，我们在div元素上添加了ref属性，并命名为myElement。然后，在getElement方法中使用this.$refs.myElement来获取该元素，并将其打印到控制台上。

通过使用$refs属性，我们可以在Vue中获取到渲染后的DOM元素，而不需要直接使用document.getElementById()方法。

在 load 中仍然获取不到 iframeWin.document.getElementById('viewer').scrollHeight的高度

如果在 `load` 事件中仍然无法获取到 `iframeWin.document.getElementById('viewer').scrollHeight` 的高度，可能是因为在 `load` 事件触发时，`iframe` 中的内容还没有完全加载完成。

您可以尝试使用 `setTimeout` 函数来延迟获取高度的操作，以确保在内容加载完全后再进行获取。请按照以下步骤进行操作：

1. 在 Vue 模板中添加一个 iframe 元素，并绑定 `@load` 事件监听器：

   <iframe @load="handleIframeLoad"></iframe>

2. 在 Vue 实例中添加一个 `handleIframeLoad` 方法来处理 iframe 加载完成的操作：

   methods: {
     handleIframeLoad(event) {
       const iframe = event.target;
       const iframeWin = iframe.contentWindow;
       setTimeout(() => {
         const viewer = iframeWin.document.getElementById('viewer');
         if (viewer) {
           const height = viewer.scrollHeight;
           console.log('Height:', height);
           // 在这里可以执行相应的操作
         }
       }, 1000); // 延迟 1 秒后获取高度
     }
   }

通过使用 `setTimeout` 函数，我们在延迟一定时间后再获取高度，以确保内容已经加载完成。您可以根据实际情况调整延迟的时间。

如果仍然无法获取到高度，请确保您的 iframe 中的内容已经完全加载，并且 `viewer` 元素正确地被获取到。

希望这个解决方案能够帮助您获取到正确的高度！如果您有任何进一步的问题，请随时提问。