Html 如何在 PhoneGap 应用程序中嵌入 iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17458909/
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 do I embed iframe in PhoneGap app?
提问by KlassAktKreations
There is a responsive scheduling website that renders a mobile view when on a phone. I want show this webpage within my PhoneGap div that way i can keep my header and navigation. Regular iframe code seems not to work for me. Can someone give me a hint on how to get this working like in the screenshot below.
有一个响应式调度网站，可以在手机上呈现移动视图。我想在我的 PhoneGap div 中显示这个网页，这样我就可以保留我的标题和导航。常规 iframe 代码似乎对我不起作用。有人可以给我一个关于如何像下面的屏幕截图一样工作的提示。
Here is what i currently have:
这是我目前拥有的：
<div id="set" title="Set Appointment" class="panel">
<iframe width="320px" height="480px" src="http://google.com"></iframe>
</div>
回答by KlassAktKreations
This works:
这有效：
<iframe src="http://www.myschedulingwebsite.com/" style="width:100%; height:100%;">
Setting the height and width to 100% fills the containing div.
将高度和宽度设置为 100% 会填充包含的 div。
NOTE:If you attempt to embed an iframe using a website that can only be displayed in a frame on the same origin as the page itself, the web inspector will throw the error below:
注意：如果您尝试使用只能在与页面本身相同来源的框架中显示的网站嵌入 iframe，网络检查器将抛出以下错误：
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
拒绝在框架中显示“ https://www.google.com/”，因为它将“X-Frame-Options”设置为“ SAMEORIGIN”。
With that said, www.google.com and several other site's embedded iframes will always be blank. I hope this helps someone.
话虽如此，www.google.com 和其他几个站点的嵌入式 iframe 将始终为空白。我希望这可以帮助别人。
回答by Mahdi Esmaeili
<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>
回答by jycr753
Well you can check this another questionsince you can come across some problems when using iframes on mobiles devices web views, if you want those two div being all the time on botton and top, you only need css to do so:
好吧，您可以检查另一个问题，因为在移动设备网络视图上使用 iframe 时可能会遇到一些问题，如果您希望这两个 div 始终位于底部和顶部，则只需要 css 即可：
.topheader {
position:fixed;
bottom:0;
}
and so on.. i hope it does help you, of course you need to make the div positions rights
等等..我希望它对你有帮助，当然你需要使div位置正确
回答by skhurams
I had the same problem and i had done it with my my own solution i have used smartzoom. Iframe cannot be given 100% width and height you have to give in pixel so i used smartzoom it will automatically fit iframe to container height and width. You can adjust the code according to your need, heres the jsfiddle
我遇到了同样的问题，我用我自己的解决方案完成了它，我使用了smartzoom。iframe 不能提供 100% 的宽度和高度，您必须以像素为单位给出，因此我使用 smartzoom 它会自动将 iframe 适合容器的高度和宽度。您可以根据需要调整代码，这里是jsfiddle
<div id="viewsites" class="viewsites">
<iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe>
</div>
