Question

我在 iOS（Safari）上遇到iframe问题。

我们通过iframe在我们的网页中使用了一个网页 - 它在PC和PC上看起来很棒在Android上，但在iOS上整个视图都被打破了，我无法让可滚动的iframe在iOS上运行。

我们过去常常在iframe本身（在div中）修复iOS滚动问题：

   overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: fixed;

不幸的是，这不再适用，所以我们把它拿出来了。这是 iframe现在的样子：

    <div class="nobottommargin">

            <p><iframe style="height: 500px; width: 100%; border: none; top: 0; left: 0;" src="https://url.com" scrolling="yes" allowfullscreen="yes" width="320" height="240"></iframe></p>
    </div>

有关如何解决此问题的任何想法或此处可以使用的其他替代方案？

编辑：我也尝试过，但没有取得任何成功：

touch-action: auto
scrolling="no"
pointer-events: none

编辑2 ：滚动现在正在工作但是向下滚动时，它正在中间切断我的iframe。仅在iOS上发行（在Android和PC上看起来很好）。

这是使用iframe裁剪错误的工作iOS滚动代码：

<div class="scroll-container scroll-ios" style="height:500px;width: 100%; position:relative">
    <div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;min-width:50%;min-height:50%;max-height:500%;top:0;left:0;-webkit-overflow-scrolling: touch !important;overflow-y:scroll !important">
            <iframe id="iframe_test" src="url.com" style="height: 100%; width:100%;min-width:100%;" name="myiFrameFix" allowfullscreen="yes" scrolling="yes">   </iframe>
    </div>
</div>

编辑3：我还尝试过，删除使用GPU欺骗浏览器的所有CSS：

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

不幸的是，这并没有解决iframe iOS错误（尝试使用iOS 9和11）。

编辑4：尝试用脚本修复iframe裁剪问题，使iframe的高度与整个主体相同。再一次，我没有成功。

<script>
    $(function() {
        var iframe = $("#iframe_test");    
        iframe.load(function() {
            $("body").height(iframe.height());
        });
    });
</script>

Answer 1

在iPhone上查看此卷轴可以顺利进行。

＆＃13;

.nobottommargin {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
iframe {
  height: 100%;
  width: 100%;
  border: none;
  display: block;
}

＆＃13;

<div class="nobottommargin">
  <iframe src="http://www.weather.gov/" frameborder="0">
</iframe>
</div>

＆＃13;

Answer 2

可能值得包含一些带有媒体查询的外部JavaScript来解决此问题，它目前正在应用于每个显示器。

Answer 3

要解决此问题。您需要在iframe上专门设置高度。

    .wrapper {
      -webkit-overflow-scrolling: touch;
    }
    <div class="wrapper">
      <iframe
        style="height: 500px"
      ></iframe>
    </div>

最困难的部分是获取iframe的内容高度。如果您拥有iframe，则可以使用window.postMessage让iframe告知父页面。否则，您需要定期检查高度，直到您认为高度固定为止。

var iframe = document.querySelector('iframe');
var setHeight = function(height) {
  iframe.style.height = height + 'px';
};
var getHeight = function() {
  return iframe.getRootNode().body.scrollHeight;
};
var prevHeight = 0;
var adjustHeight = function() {
  var height = getHeight();
  if (prevHeight !== height) {
    prevHeight = height;
    setTimeout(adjustHeight, 2000);
  } else {
    setHeight(height);
  }
};
setTimeout(adjustHeight, 2000);

Answer 4

我遇到这个问题已有一段时间了，终于找到了一个解决方法，它可以通过减小iframe中消失的div的宽度来为我工作。我的是100％，减少到95％可以解决。我不确定以px为单位的实际最大宽度，但我认为它必须小于屏幕的宽度。我尝试了您提到的所有CSS技巧等等，但这是唯一有效的方法。

使用iframe

这是使用iframe裁剪错误的工作iOS滚动代码：

4 个答案: