个人中心
gpt4 book ai didi

javascript - 处理来自父窗口 ScrollBar 的 iframe 滚动

转载 作者：行者123 更新时间：2023-12-01 00:55:28 30 4
gpt4 key购买 nike

我正在构建一个可在不同域中使用的iframe。 iframe 有一个数据列表，到达滚动底部后会更新更多数据。

我遇到一个问题，其中包含 iframe 的父窗口有两个滚动条；我的目标是消除父滚动条并依赖 iframe 滚动或相反。重要的是两者都需要一张卷轴，

我的代码如下:

 <html>
   <body >
      <div>Header</div>
      <iframe
         width='100%'
         height='500px'
         onLoad="window.parent.scroll(0,0);"
         id='iframe'
         src="myIframe.com"></iframe>

       <div>Footer</div>
   </body>
   <script type="text/javascript">
     window.addEventListener('message', function (e) {
         document.getElementById("iframe").height = e.data.frameHeight
       });
 </script>
</html>

监听来自父级的消息并设置框架的高度，有助于消除 iframe 的滚动，但我确实需要该滚动在到达底部时更新列表。

我尝试了一些方法但没有成功。在这种情况下实现我的目标的最佳方法是什么？

最佳答案

简短回答

https://github.com/davidjbradshaw/iframe-resizer

更长的答案

上述库的做法是使用 MutationObserver 来检测 iframe 中 DOM 的变化，以触发页面大小的重新计算。复杂之处在于必须检测新加载的 html 中的图像何时也加载。 

function setupBodyMutationObserver() {
    function addImageLoadListners(mutation) {
      function addImageLoadListener(element) {
        if (false === element.complete) {
          log('Attach listeners to ' + element.src)
          element.addEventListener('load', imageLoaded, false)
          element.addEventListener('error', imageError, false)
          elements.push(element)
        }
      }

      if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
        addImageLoadListener(mutation.target)
      } else if (mutation.type === 'childList') {
        Array.prototype.forEach.call(
          mutation.target.querySelectorAll('img'),
          addImageLoadListener
        )
      }
    }

    function removeFromArray(element) {
      elements.splice(elements.indexOf(element), 1)
    }

    function removeImageLoadListener(element) {
      log('Remove listeners from ' + element.src)
      element.removeEventListener('load', imageLoaded, false)
      element.removeEventListener('error', imageError, false)
      removeFromArray(element)
    }

    function imageEventTriggered(event, type, typeDesc) {
      removeImageLoadListener(event.target)
      sendSize(type, typeDesc + ': ' + event.target.src, undefined, undefined)
    }

    function imageLoaded(event) {
      imageEventTriggered(event, 'imageLoad', 'Image loaded')
    }

    function imageError(event) {
      imageEventTriggered(event, 'imageLoadFailed', 'Image load failed')
    }

    function mutationObserved(mutations) {
      sendSize(
        'mutationObserver',
        'mutationObserver: ' + mutations[0].target + ' ' + mutations[0].type
      )

      // Deal with WebKit / Blink asyncing image loading when tags are injected into the page
      mutations.forEach(addImageLoadListners)
    }

    function createMutationObserver() {
      var target = document.querySelector('body'),
        config = {
          attributes: true,
          attributeOldValue: false,
          characterData: true,
          characterDataOldValue: false,
          childList: true,
          subtree: true
        }

      observer = new MutationObserver(mutationObserved)

      log('Create body MutationObserver')
      observer.observe(target, config)

      return observer
    }

    var elements = [],
      MutationObserver =
        window.MutationObserver || window.WebKitMutationObserver,
      observer = createMutationObserver()

    return {
      disconnect: function() {
        if ('disconnect' in observer) {
          log('Disconnect body MutationObserver')
          observer.disconnect()
          elements.forEach(removeImageLoadListener)
        }
      }
    }
  }

  function setupMutationObserver() {
    var forceIntervalTimer = 0 > interval

    // Not testable in PhantomJS
    /* istanbul ignore if */ if (
      window.MutationObserver ||
      window.WebKitMutationObserver
    ) {
      if (forceIntervalTimer) {
        initInterval()
      } else {
        bodyObserver = setupBodyMutationObserver()
      }
    } else {
      log('MutationObserver not supported in this browser!')
      initInterval()
    }
  }

关于javascript - 处理来自父窗口 ScrollBar 的 iframe 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59928424/

30 4 0
文章推荐： javascript - 使用jquery垂直打印日历
文章推荐： javascript - 使用 javascript 替换 url 查询字符串值
文章推荐： javascript - 尝试将 Next.js 应用程序部署到 Zeit 云并在开发模式下运行时出错
文章推荐： mysql - 在同一个查询中选择组和用户
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com