如何在弹出窗口或 iframe 中显示网页？哪个是最佳实践？答案

【问题标题】：How can I display a webpage in a popup or iframe? Which is best practice?如何在弹出窗口或 iframe 中显示网页？哪个是最佳实践？
【发布时间】：2017-03-19 03:51:38
【问题描述】：

我想让访问者点击菜单项并在 iframe/div 中弹出页面，该页面位于页面中心，如图所示（我以 Google 为例）。

我研究过 iframe，但它们似乎很挑剔。这里的最佳做法是什么？感谢您的帮助！

【问题讨论】：

是为您自己的网站准备的吗？还是第三方网站？如果是外部的，您可以尝试使用 sandbox 参数，这可能会避免一些问题（例如帧破坏代码），但不能保证它的功能与在新窗口中呈现时完全相同 - <iframe src="https://www.google.com/" sandbox></iframe>。
具有讽刺意味的是，Google 是一个不起作用的例子——他们使用 X-Frame-Options HTTP 标头来防止他们的网站显示在框架中。（sandbox 属性不会绕过这一点。）
它将是外部页面。我想知道谷歌是否有一些奇怪的事情。当我将它插入现有的测试代码时它不起作用。

标签： javascript jquery html css iframe

【解决方案1】：

对于弹出窗口，您应该使用window.open 和第三个参数strWindowFeatures。然后，您将计算窗口的大小并进行数学运算以找到确切的左侧和顶部位置。毕竟，这是 Javascript，你可以访问 window.innerWidth 和类似的东西！

计算窗口位置的公式为：

{
    left: pageWidth - popupWidth / 2,
    top: pageHeight - popupHeight / 2,
}

希望这对您有所帮助！

【讨论】：

【解决方案2】：

如果您想要嵌入网页，实际上没有任何替代 iframe 的方法，但是您可以在单击选项卡时利用 AJAX 编写动态页面脚本。更多信息请见Better alternative to an iframe?

【讨论】：

【解决方案3】：

您可以使用 Bootstrap 模式窗口来做到这一点。

【讨论】：