如何在PhoneGap应用程序中嵌入iframe？

有一个响应式调度网站，可以在手机上呈现移动视图。我想在我的PhoneGap div中显示这个网页，这样我可以保留我的标题和导航。常规的iframe代码似乎不适合我。有人可以给我一个关于如何在下面的屏幕截图中运行的提示。如何在PhoneGap应用程序中嵌入iframe？

这里是我目前有：

<div id="set" title="Set Appointment" class="panel"> 
      <iframe width="320px" height="480px" src="http://google.com"></iframe> 
    </div>

enter image description here

来源

2013-07-03 KlassAktKreations

这工作：

<iframe src="http://www.myschedulingwebsite.com/" style="width:100%; height:100%;">

设置高度和宽度100％充满包含分区。

注：如果试图使用只能显示在相同的来源页面本身的框架以嵌入网站的iframe，Web检查将抛出下面的错误：

拒绝在一个框架中显示'https://www.google.com/'，因为它将'X-Frame-Options'设置为'SAMEORIGIN'。

即便如此，www.google.com和其他几个网站的嵌入式iframe始终是空白的。我希望这可以帮助别人。

来源

2013-07-04 05:07:16 KlassAktKreations

那么你可以检查此另一个question，因为你可以在手机上的设备的网络视图中使用iframe后遇到一些问题来了，如果你想那些两个div在所有的时间在botton和顶部，你只需要CSS来做到这一点：

.topheader { 
    position:fixed; 
    bottom:0; 
}

等等..我希望它hel p你，当然你需要在div位置权利

来源

2013-07-03 22:12:22 jycr753

但在这种情况下，怎么会在“topheader”的“菜单”链接允许用户导航回到内的其他页面PhoneGap应用程序？ –

我有同样的问题，我用我自己的解决方案做了它我已经使用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>

来源

2015-03-27 09:46:53 skhurams

<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>

来源

2016-05-21 14:29:28

选择的答案对我来说效果不好，因为iframe的内容没有居中，相反，它放在页面上太低而向右移动。我使用了这种风格（z-index部分除外），然后正确显示。 – Akronix

如何在PhoneGap应用程序中嵌入iframe？

回答

相关问题