如何在 IOS 上运行的 phonegap/cordova 应用程序中打开 iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15212824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I open an iframe in a phonegap/cordova app running on IOS?
提问by Troy
I have a webapp that I'm using with PhoneGap/Cordova to install in iOS and Android. At one point in the app I have an iframe that loads content from a second server.
我有一个 web 应用程序，我使用 PhoneGap/Cordova 安装在 iOS 和 Android 中。在应用程序的某个时刻，我有一个 iframe 从第二个服务器加载内容。
When I run the app from a browser, everything works as expected - the iframe opens in the same page and loads the content from the second site.
当我从浏览器运行应用程序时，一切都按预期工作 - iframe 在同一页面中打开并从第二个站点加载内容。
When I run the webapp on an iPhone simulator using Cordova, when the iframe opens, iOS switches over to Safari and puts my app in the background.
当我使用 Cordova 在 iPhone 模拟器上运行 webapp 时，当 iframe 打开时，iOS 切换到 Safari 并将我的应用程序置于后台。
Steps taken:
采取的步骤：
- I added the second site to the "ExternalHosts" array in the Cordova.plist file.
- I created a config.xml file next to the index.html file in the /www directory, according to the PhoneGap/Cordova documentation (https://build.phonegap.com/docs/config-xml).
- I added a <preference name="stay-in-webview" value="true" /> tag to the config.xml file as a child of the main <widget> tag.
- 我将第二个站点添加到 Cordova.plist 文件中的“ExternalHosts”数组。
- 根据 PhoneGap/Cordova 文档 ( https://build.phonegap.com/docs/config-xml) ，我在 /www 目录中的 index.html 文件旁边创建了一个 config.xml 文件。
- 我在 config.xml 文件中添加了一个 <preference name="stay-in-webview" value="true" /> 标签作为主 <widget> 标签的子标签。
My suspicion is that it is not reading/using the config.xml file, but there could be something else... Does anyone have any ideas what I might be doing wrong?
我怀疑它没有读取/使用 config.xml 文件，但可能还有其他东西......有没有人知道我可能做错了什么？
回答by Troy
After adding an InAppBrowser in place of the iframe I was using before, I eventually tried an iframe again, and the iframe now works without jumping over to the phone's browser, as it was doing before, and the iframe works consistently in both iOS and Android.
在添加 InAppBrowser 代替我之前使用的 iframe 之后，我最终再次尝试了 iframe，现在 iframe 可以正常工作，而不会像以前那样跳转到手机的浏览器，并且 iframe 在 iOS 和 Android 中都能正常工作.
2 things changed from the time that iframes were broken to when they started working:
从 iframe 被破坏到它们开始工作时，有两件事发生了变化：
- I upgraded to Cordova 2.5
I started dynamically creating/adding the iframe to the page using jquery, rather than just unhidingan already-existing iframe, as I was doing initially:
$('<iframe src="whatever.com" height="100%" width="100%" frameborder="0"></iframe>').appendTo('body'); .
- 我升级到 Cordova 2.5
我开始使用 jquery 动态创建/添加 iframe 到页面，而不是像我最初所做的那样只是取消隐藏已经存在的 iframe：
$('<iframe src="whatever.com" height="100%" width="100%" frameborder="0"></iframe>').appendTo('body'); .
I didn't bother checking whether it was #1 or #2 that fixed the iframe issue (I'm guessing it's #1), but I thought I would post that it IS possible to get iframes working with a PhoneGap/Cordova app, in case someone else runs into the same problem.
我没有费心检查是 #1 还是 #2 修复了 iframe 问题（我猜是 #1），但我想我会发帖说可以让 iframe 与 PhoneGap/Cordova 应用程序一起使用，以防其他人遇到同样的问题。
回答by Nishanth Nair
Why dont you use the InAppBrowser? http://docs.phonegap.com/en/2.3.0/cordova_inappbrowser_inappbrowser.md.html. It is going to be tricky to use iframes which works both in Android as well as in iOS
为什么不使用 InAppBrowser？http://docs.phonegap.com/en/2.3.0/cordova_inappbrowser_inappbrowser.md.html。使用同时适用于 Android 和 iOS 的 iframe 会很棘手
回答by eyal_katz
The same thing now with iOS 8 is not working. I get the iFrame with no scrolling and overflowing on other divs. Tried various css styles but no solution. Works fine on Android apps. This is using the latest Phonegap build.
iOS 8 现在同样的事情不起作用。我在其他 div 上没有滚动和溢出的 iFrame。尝试了各种 css 样式，但没有解决方案。在 Android 应用程序上运行良好。这是使用最新的 Phonegap 版本。
