对象/iframe 溢出滚动在 ios (cordova) 中不起作用答案

【问题标题】：object/iframe overflow scroll not working in ios (cordova)对象/iframe 溢出滚动在 ios (cordova) 中不起作用
【发布时间】：2019-06-20 03:48:09
【问题描述】：

我正在使用cordova 8.1.2 在 iframe/object 中加载我的页面。但滚动在 iphone 中不起作用。

下面cordova中的config.xml内容

<content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="*" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <preference name="android-targetSdkVersion" value="26" />
    <preference name="loadUrlTimeoutValue" value="700000" />
    <engine name="android" spec="^7.1.2" />
    <engine name="ios" spec="^4.5.5" />

用于 iframe 的代码：

    <html lang="en" class="no-js">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self'">
      <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />    
   </head>
   <body style="overflow:hidden; height:100%;">
      <div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">
      <iframe id="frame-one" data-tap-disabled="true" frameborder="0" src="my-url-website"></iframe>
      </div>
   </body>
</html>

用于对象标记的代码：

   <body style="overflow:hidden; height:100%;">
      <div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">
         <object id="previllew-frame" style="width:100%;height:100%" data="my-url-website"></object>
      </div>
   </body>

请帮帮我，谢谢。

【问题讨论】：

标签： html ios css cordova

【解决方案1】：

将以下属性和值添加到 iframe 为我修复了移动 Safari 中的 iOS 滚动问题：

scrolling="yes"

但是，在 Cordova 移动应用程序中加载 iFrame 时，我仍在寻找解决此问题的方法。

【讨论】：

【解决方案2】：

这是 iFrames 和 ios 的一个常见问题，我不久前遇到过这个问题，但不幸的是，我不记得究竟是什么对我有用，因为我从很多来源尝试了很多东西。试试下面的

<iframe id="frame-one" data-tap-disabled="true" frameborder="0" src="my-url-website" scrolling="yes"></iframe>

【讨论】：

【解决方案3】：

我在 iOS 上遇到了与我正在从事的网络相关项目相同的问题。所以我很确定问题与 Safari/Webkit 相关。我还没有找到解决方案，但问题似乎与 Cordova 没有任何关系。试着看看你是否能弄清楚如何让你的代码在 Safari 中作为网页工作。

编辑：

好的，所以我找到的答案是，如果您为 iframe 设置 scrolling=no，那么该错误就会消失。不幸的是，我正在处理的项目需要有一个滚动 iframe，所以这对我来说是个问题，但我希望这个解决方案能有所帮助！

var iFrame = document.getElementById("iFrame");
iFrame.scrolling = "no";

【讨论】：