vue.js - iframe contentWindow.document 获取异常

问题描述

问 题

先上代码

<template>
  <div>
    <iframe ref="previewIframe" :src="frameSrc" frameborder="0">
    </iframe>
  </div>
</template>
<script>
  import html2canvas from 'html2canvas'
  import frame from 'components/html2canvas/priview.html'
  export default {
    props: {
      htmlString: {
        type: String
      }
    },
    data() {
      console.log(frame)
      return {
        frameSrc: frame
      }
    },
    mounted() {
      this.$nextTick(function() {
        console.log(this.$refs.previewIframe.contentWindow)
        console.log(this.$refs.previewIframe.contentWindow.document)
        console.log(this.$refs.previewIframe.contentWindow.document.getElementById('previewContent'))
      })
    },
  }
</script>

为啥打印出来的that.$refs.previewIframe.contentWindow能看到document里面有内容

打印出来的that.$refs.previewIframe.contentWindow.document获取的内容body里面却是空的，也获取不到getElementById('previewContent')的值

事实上iframe里面是有内容的

解决方案

好吧，需要window.onload，等加载完毕后再获取

这篇关于vue.js - iframe contentWindow.document 获取异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！