Question

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

这在Chromem，Firefox和IE中称为Intersection Observer的本机中正常运行。但是，这在Safari中不起作用。

为此创建了一个polyfill：Github link，并且也应该在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上对其进行了测试，但是它会立即发出警报，并且在单击警报后，在上下滚动时它不再显示。

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

有人对此有解决方案吗？

Answer 1

我在github上看到一个问题，其中概述了由于怪异模式https://github.com/w3c/IntersectionObserver/issues/282导致野生动物园的高度不正确。也许添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="table" id="myTable">
  <tbody>
    <tr>
      <td>Value 1</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr>
      <td>Value 2</td>
      <td><input type="number" class="addData"></td>
     </tr>
     <tr id="my_new_raw">
      <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td>
      <td></td>
     </tr>
     <tr>
      <td>Total</td>
      <td><input type="number" readonly id="my_total"></td>
     </tr>
  </tbody>
</table>

可以修复它。

交叉点观察器polyfill无法正常工作Safari

1 个答案: