3

我需要检测从另一个域加载的 iframe 是否在视口中。

这在 Chromem、Firefox 和 IE 中运行良好，称为 Intersection Observer。但是，这在 Safari 中不起作用。

已经为此创建了一个 polyfill：Github 链接，并且应该也可以在 Safari 上运行。

我使用以下代码对其进行了测试：

站点 A：

<html>
  <head>
  </head>
    <body>
     A lot of text here so the iframe is not inview.
     A lot of text here so the iframe is not inview.
     <br>
     <br>
     .
     .
     .
     .
     .
     .
     .
     <br>
     A lot of text here so the iframe is not inview.
    <iframe src="//siteB.com/test.html" frameborder="0" border="0" scroll="no" scrolling="no" width="300" height="250" style="border: 0px; overflow: hidden !important;"></iframe>
    </body>
    </html>

站点 B：

<html>
    <head>
        <script src="intersection-observer.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function(event) { 
              //do work
                var io = new IntersectionObserver(
                  entries => {
                    console.log(entries);
                    if (entries["0"].isIntersecting) {
                        alert("inview");
                    } 
                  },
                  {
                    /* Using default options. Details below */
                  }
                );
                // Start observing an element
                var img1 = document.getElementById("img1");
                console.log(img1);
                io.observe(img1);
            });
        </script>
    </head> 
    <body>
        <img id="img1" src="motor.gif" style="position:absolute; top:0px; left:0px"/>
    </body>
</html>

但是我已经在 Iphone 6 上对此进行了测试，但是它会立即发出警报，并且在单击警报后它在向上和向下滚动时不再显示。

他们包含的 intersection-observer-test.html 页面返回了所有 25 个测试的通行证。

有人对此有解决方案吗？

4

1 回答 1

4

我在 github 上看到了一个问题，其中概述了 safari 由于怪癖模式而获得不正确的高度：https ://github.com/w3c/IntersectionObserver/issues/282 。也许添加

<!DOCTYPE html>
<html>

可以修复它。

于 2018-08-27T08:40:10.847 回答