带有 iframe 的嵌入式网站中的 iOS 滚动问题

Posted 2023-03-05

【中文标题】带有 iframe 的嵌入式网站中的 iOS 滚动问题

【英文标题】：iOS scrolling problems in embedded website with iframe

【发布时间】：2018-11-17 15:01:01

【问题描述】：

我在 iOS (Safari) 上遇到 iframe 问题。

我们正在通过 iframe 在我们的网页中使用网页 - 它在 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"  ></iframe></p>
    </div>

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

编辑：我也尝试过，但没有成功：

touch-action: auto 在 iframe 标签上 scrolling="no" 在 iframe 标签上 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>

【问题讨论】：

这些属性应用于什么选择器？

@ChaseIngebritson 你的意思是我们在它不起作用之前使用的修复程序吗？我们把它放在一个额外的滚动容器中。我们也使用了这个：overflow-y:scroll。控制溢出的 div 比使用 iframe 更容易。 <div class="scroll-wrapper"> <iframe src=""></iframe> </div>.scroll-wrapper -webkit-overflow-scrolling: touch; overflow-y: scroll; /* dimensions and positions were placed here */

试试高度：200px； （像素不是百分比！）对于 nobottommargin ！

【参考方案1】：

在您的 iPhone 上检查此项，滚动运行顺畅。

.nobottommargin 
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;

iframe 
  height: 100%;
  width: 100%;
  border: none;
  display: block;

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

【讨论】：

这是我们尝试的第一件事。谢谢你的回复！不幸的是，它为我们裁剪了中间的 iframe。正如您在上面的编辑中看到的那样，我们尝试将 iframe 的整体高度也更改为整个身体，但没有任何运气。值得一提的是，我们的嵌入式网站中有多张可点击的图片。

是否可以分享您的嵌入式 URL 或应用链接？调试起来很容易

【参考方案2】：

可能值得在媒体查询中包含一些外部 javascript 来解决此问题，目前它已应用于每个显示。

【参考方案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);

【讨论】：

如果你没有 iFrame，就不能像这样访问它的 body 和 scrollHeight。然而，window.postMessage 方法会起作用。

【参考方案4】：

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

【讨论】：

发生了什么是 100% 的宽度不允许您抓取 iframe 之外的区域 - 但是当宽度不是 100% 时，您可以抓取一些东西......