有没有办法让 div 像 iframe 一样工作？答案

【问题标题】：Is there a way to make a div work like an iframe?有没有办法让 div 像 iframe 一样工作？
【发布时间】：2012-11-15 18:49:30
【问题描述】：

所以我正在为一个人建立一个网站，他想要获取一个我已经制作的页面，该页面基本上是一个订单计算器，并在弹出的 div 元素中使其在网站的每个页面上都可用。所以我组装了一个简单的 iFrame 将页面加载到自己的盒子中，一切都会正常工作，但他不喜欢它的外观，我承认，如果 iFrames 不占用的话，看起来有点马虎整个页面，它们会导致居中问题。

所以我想我会把它放到它自己的 div 中，然后通过 jQuery 将页面加载到 div 中，但是样式表会出现问题。位置页面和加载的计算器页面都有它们必须使用的基本 CSS 元素并且它们相互冲突，所以有没有办法让加载页面的 div 内的 css 导入仅适用于该 div 内的元素不重命名所有内容？

感谢您的帮助。

代码：

function po()
{
    $("#calculator").load("/calculator/");
    $("#calculator").fadeIn();
    $("#modalbackground").fadeIn();
    $("#closeCalc").fadeIn();
}

我们很乐意接受任何其他解决方案！

【问题讨论】：

没有直接的方法可以做到这一点
为什么 iFrame 看起来很邋遢？您发现什么居中问题？
如果这是一个完整的 html 页面，你正在加载到一个 div 中，你真的不应该那样做。它会严重破坏您的代码。
当你正确使用 CSS 时，iframe 可以像任何其他元素一样工作。
没有其他方法，但是有一些方法可以设置 IFrame 的样式。许多网站都使用它，而且很可能对其进行样式设置，这样您就无法（或几乎不）知道它的存在。

标签： javascript jquery html css ajax

【解决方案1】：

也许您可以将无边框 iframe 放入 div

<div style='width:100px; height:100px;'>
    <iframe style='width:100%; height:100%; border:0;'></iframe>
</div>

iframe 应该占据 div 的整个宽度

【讨论】：

我只是 iframe { display: block; width: 100%; height: 100%; } 等 - 并将样式排除在 HTML 之外。然后，使用容器来定义它的大小。

【解决方案2】：

只需将frameborder="0" 添加到<iframe> 标签，它看起来就像一个可滚动的<div>。您甚至可以在 CSS 中添加自己的边框（尽管在包含元素而不是 <iframe> 本身上这样做可能会更好）。

如果你愿意，我可以给你看一张我网站上的截图，它使用了<iframe>s，看起来像<div>s。

【讨论】：

【解决方案3】：

如果你在一个 div 中加载整个页面，包括 body 标签，这肯定是错误的。您应该加载页面片段（计算器页面中的特定 div）。在这种情况下，只需给这个特定的 div 一个唯一的 id 并基于这个 id 构建您导入的样式表以避免冲突：

#loginBox input {...}

如果这是不可能的，那么我会说 iframe 是要走的路。例如，您可以在计算器中添加一个脚本来调整其父级的大小（通过 parent.frameElement 访问）。记录一下，html5有一个“无缝”的属性，但浏览器兼容性仍然很差。

【讨论】：

它是一个页面片段。我没有提到我在准备要加载的页面之前删除了所有这些标签。
好的，我看到你有一个 id loginBox。然后，如果您在所有样式前加上#loginBox，则应该没有冲突。

【解决方案4】：

要使 iframe 在 Mozilla 中正常工作，您需要使用 em 作为单位而不是 px 或正常的 %（如果它超出了您的情况的 div 限制）。

这个问题在几个 FireFox 论坛上被问到，但显然他们似乎对使用 iframe 有一些安全问题。

em 值应该在 iframe 标签中指定，而不是在 div 中标记

我制作了一个页面，其中包含三个 iframe 一个在另一个之下（我知道大多数人不会喜欢它，但我是初学者）并且它们在所有浏览器中都可以正常工作。

您需要能够通过自己实际尝试来确定它们。

我个人不建议使用 iframe 作为解决方法，但应该使用它的设计用途。

希望这可以帮助大家阅读我的帖子。如果您认为我错了，请发表评论。我会很感激你的帮助。谢谢！

【讨论】：