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

Question

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

这是我目前拥有的：

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

Answer 1

这有效：

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

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

注意：如果您尝试使用只能显示在与页面本身同源的框架中的网站嵌入 iframe，则 Web 检查器将抛出以下错误：

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

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

Answer 2

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

Answer 3

好吧，您可以检查另一个问题，因为在移动设备的 Web 视图上使用 iframe 时可能会遇到一些问题，如果您希望这两个 div 始终位于底部和顶部，则只需要 css 即可：

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

等等..我希望它对你有帮助，当然你需要使div位置权利

Answer 4

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