如何在PhoneGap应用中嵌入iframe?

时间:2013-07-03 22:08:24

标签: html5 iframe cordova

有一个响应式调度网站,可以在手机上呈现移动视图。我想在我的PhoneGap div中显示这个网页,这样我可以保持我的标题和导航。常规的iframe代码似乎对我不起作用。有人可以给我一个关于如何使其工作的提示,如下面的屏幕截图所示。

以下是我目前的情况:

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

enter image description here

4 个答案:

答案 0 :(得分:17)

这有效:

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

将高度和宽度设置为100%将填充包含的div。

注意:如果您尝试使用只能在与网页本身相同的原始图片框架中显示的网站嵌入iframe,网页检查员会抛出以下错误:

拒绝在相框中显示“https://www.google.com/”,因为它将“X-Frame-Options”设置为“ SAMEORIGIN ”。

据说,www.google.com和其他几个网站的嵌入式iframe将始终为空白。我希望这有助于某人。

答案 1 :(得分:3)

id     user_id     create_date
1         1         2016-01-05
3         3         2016-01-06
5         2         2016-01-12
6         4         2016-01-15

答案 2 :(得分:0)

那么你可以检查另一个question,因为你在移动设备网页浏览器上使用iframe时会遇到一些问题,如果你希望这两个div一直在botton和top上,你只需要css到这样做:

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

等等..我希望它确实对你有所帮助,当然你需要做出div职位权利

答案 3 :(得分:0)

我有同样的问题,我用我自己的解决方案完成了它 我使用过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>