如何在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>  

- KlassAktKreations

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和其他一些站点的嵌入式iframes将始终为空白。希望这能帮助某些人。

- KlassAktKreations

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>

- Mahdi Esmaeili

---

选定的答案对我来说效果不佳，因为 iframe 内容没有居中，而是放置在页面太低并向右位移了。 我使用了这个样式（除了 z-index 部分），然后它正确地显示了。 - Akronix

Answer 3

我曾经遇到过同样的问题，但是我用了自己的解决方案。我使用了smartzoom。Iframe无法给出100%的宽度和高度，你必须以像素为单位给出，所以我使用了smartzoom，它会自动适应容器的高度和宽度。你可以根据需要调整代码，这里是jsfiddle。

<div id="viewsites" class="viewsites">
    <iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe>
</div>

- skhurams

Answer 4

好吧，你可以看看这个问题，因为在移动设备的 Web 视图上使用 iframe 时可能会遇到一些问题，如果你想让这两个 div 一直保持在底部和顶部，只需要使用 CSS 就可以了：

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

等等等等.. 我希望这会对你有所帮助，当然你需要将div位置正确设置

- Jorge Y. C. Rodriguez

---

但在这种情况下，“topheader”中的“菜单”链接如何允许用户在PhoneGap应用程序中导航回其他页面？ - Matty J