在 iOS Cordova 项目中用 Webview 替换 iframe
Replacing an iframe with a Webview in an iOS Cordova Project
我目前正在 iOS 中开发一个混合应用程序，它使用 cordova 插件加载网站并具有一些其他功能（联系人、共享、通知...）。我可以访问 iframe 显示的网站内容。
通常的做法是在 iframe 中加载网站。我已经在 android 中完成了这项工作并且效果很好。然而在 iOS 中：
- Safari 弄乱了框架的大小。我通过将框架的 min-width css 样式设置为 100% 来解决此问题。
- 在 iframe 上滚动始终设置为 "no"，即使您指定 "yes. I "fixed" 这（所以我认为）通过使用我能找到的唯一解决方案将 iframe 包装在a div 并滚动 div。这使得 header (position:fixed) 在应该固定到页面顶部时随页面滚动并破坏了页面上的其他内容依靠滚动位置来触发动作。我还尝试修改内容的 body 以包含提到的 css 样式 here 但这也不起作用。我回到正方形一.
我花了整整一个星期的时间研究如何解决这个问题，但没有成功。最近我发现在 iOS 的 UIWebView 或 WKWebView 中加载我的网站可以很好地显示我期望的网站。
这让我想到了两个可能的解决方案（和我的问题）：
- 也许我错过了网站内容中 css 风格的内容。我读到有可能以这种方式滚动工作，但我持怀疑态度，因为 safari 不允许在 iframe 上滚动。
- （可能的解决方案，但我无法弄清楚）让我的 cordova 应用程序使用 iOS 的 webviews 之一。这就是我遇到的问题。我不知道该怎么做。 webview 是 iframe 吗？如何在我的应用程序中使用这些网络视图之一？当我使用 webview 而不是 iframe 时，index.html（cordova 特定文件）是什么样的（因为目前这是我的 iframe 所在的位置）。
我解决了这个问题。由于我可以访问该页面的内容，因此我添加了：
position:absolute
top: 0
right:0
bottom:0
left: 0
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
到页面的滚动体。这解决了我的问题
我目前正在 iOS 中开发一个混合应用程序，它使用 cordova 插件加载网站并具有一些其他功能（联系人、共享、通知...）。我可以访问 iframe 显示的网站内容。
通常的做法是在 iframe 中加载网站。我已经在 android 中完成了这项工作并且效果很好。然而在 iOS 中：
- Safari 弄乱了框架的大小。我通过将框架的 min-width css 样式设置为 100% 来解决此问题。
- 在 iframe 上滚动始终设置为 "no"，即使您指定 "yes. I "fixed" 这（所以我认为）通过使用我能找到的唯一解决方案将 iframe 包装在a div 并滚动 div。这使得 header (position:fixed) 在应该固定到页面顶部时随页面滚动并破坏了页面上的其他内容依靠滚动位置来触发动作。我还尝试修改内容的 body 以包含提到的 css 样式 here 但这也不起作用。我回到正方形一.
我花了整整一个星期的时间研究如何解决这个问题，但没有成功。最近我发现在 iOS 的 UIWebView 或 WKWebView 中加载我的网站可以很好地显示我期望的网站。
这让我想到了两个可能的解决方案（和我的问题）：
- 也许我错过了网站内容中 css 风格的内容。我读到有可能以这种方式滚动工作，但我持怀疑态度，因为 safari 不允许在 iframe 上滚动。
- （可能的解决方案，但我无法弄清楚）让我的 cordova 应用程序使用 iOS 的 webviews 之一。这就是我遇到的问题。我不知道该怎么做。 webview 是 iframe 吗？如何在我的应用程序中使用这些网络视图之一？当我使用 webview 而不是 iframe 时，index.html（cordova 特定文件）是什么样的（因为目前这是我的 iframe 所在的位置）。
我解决了这个问题。由于我可以访问该页面的内容，因此我添加了：
position:absolute
top: 0
right:0
bottom:0
left: 0
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
到页面的滚动体。这解决了我的问题