VUE iframe标签预览HTML链接增加监听滚到底部事件

 需求是: 有个在服务器上的html文件,希望在vue项目的页面里去预览该文件内容,并且监听查看内容完毕后(即内容滚到底部后)再进行一些操作

先附上已成功的代码

<iframe :src="cont" class="f-cont" ref="myIframe"></iframe>

 window.addEventListener('message', (event) => {
      if (event.data === 'scrollToBottom') {
          console.log('已经滑动到底部');
      }
    }, false);

在html文件里增加代码

window.addEventListener('scroll', function() {
  const isBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
  if (isBottom) {
    parent.postMessage('scrollToBottom', '*');
  }
});

---

 这是分隔线 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

 拿到该需求,就在思考,必须得拿到iframe里的DOM结构,所以,开始敲代码,如下

// iframe 加载完成后才能获取iframe 内部的 DOM 元素
    handleIframeLoad() {