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

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

先附上已成功的代码

 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() {
      // 获取 iframe dom 对象
      const iframe = this.$refs.myIframe;
      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      // 监听 iframe 内容滚动事件
      iframeDocument.addEventListener('scroll', this.handleIframeScroll);
    },
    // iframe 内容滚动事件回调
    handleIframeScroll(e) {
      const iframe = this.$refs.myIframe;
      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

      const isScrollToBottom = ((iframeDocument.documentElement.clientHeight + iframeDocument.documentElement.scrollTop) - iframeDocument.documentElement.scrollHeight) >= 0;
      if (isScrollToBottom) {
        console.log('已滚动到底')
      }
    },

发测试站,手机测试,手机ok,安卓手机问题多多,所以,开始在网上百度兼容安卓手机的方法,找到
该方法: 在该示例代码中，我们使用 MutationObserver 监听 iframe 内容变化：通过 MutationObserver 可以监控 DOM 元素的变化，从而实现监听 iframe 内容滚动事件的效果。