Question

我正在使用cordova 8.1.2将页面加载到iframe /对象中。但是滚动无法在iPhone中使用。

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>

请帮助我，谢谢。

Answer 1

为iframe添加以下属性和值可以为我解决移动Safari中的iOS滚动问题：

scrolling="yes"

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

Answer 2

对于我正在从事的与网络相关的项目，我在iOS上遇到了同样的问题。因此，我很确定问题与Safari / Webkit有关。我还没有找到解决方案，但是问题似乎与Cordova无关。尝试看看是否可以弄清楚如何使代码在Safari中作为网页工作。

编辑：

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

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

Answer 3

这是借助iframe和iOS的一个常见问题，我跑进这一段时间回来，但不幸的是我不记得究竟是什么工作对我来说，因为我想从这么多的资源这么多的事情。尝试以下

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

对象/ iframe溢出滚动不适用于ios（cordova）

3 个答案: