有没有一种方法可以使一个 div 像 iframe 一样工作？

Question

我正在为一位客户建立网站，他希望我将一个已经制作好的订单计算器页面放在网站的每个页面中，并以弹出式div元素的形式呈现。因此，我编写了一个简单的iFrame，将页面加载到自己的框中，一切都正常工作，但他不喜欢它的外观，我承认，如果它们没有占据整个页面并且会导致居中问题，iFrames看起来有点松散。

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

谢谢您的帮助。

代码：

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

欢迎提供其他解决方案！

- Liftoff

---

没有直接的方法来做到这一点。 - SReject

为什么iFrame看起来很松散？你看到了哪些居中问题？ - Michael Mior

如果您将完整的HTML页面加载到div中，那么您真的不应该这样做。这会严重破坏您的代码。 - mck

如果您正确使用CSS，Iframes可以像任何其他元素一样工作。 - Diodeus - James MacFarlane

没有其他的方法，但有办法来为IFrame添加样式。许多网站都在使用它，很可能会将其样式化，以便您无法（或几乎无法）察觉到它的存在。 - GolezTrol

如果在同一域中调用iframe页面，则没有理由不能使用iframe。 - A. Wolff

Answer 1

也许你可以将一个没有边框的iframe放入一个div中。

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

< p > iframe 应该占据整个 div 的宽度

- lostsource

---

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

Answer 2

为了使Mozilla中的iframes正常工作，您需要使用em作为单位，而不是px或普通的百分比，如果超过div限制，就像在您的情况下一样。

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

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

我做了一个页面，其中有三个iframes一个在另一个下面（我知道大多数人不喜欢，但我是初学者），它们在所有浏览器中都能完美地工作。

您需要通过实际尝试来确定em的值。

我个人不建议将iframe用作解决方法，但应该按照其设计目的使用。

希望这对阅读我的帖子的每个人都有所帮助。如果您认为我错了，请留下评论。感谢您的帮助。谢谢！

- Vishal Oulkar

Answer 3

只需在<iframe>标签中添加frameborder="0"，它就会像可滚动的<div>一样。您甚至可以在CSS中添加自己的边框（虽然最好是在包含元素而不是<iframe>本身上完成）。

如果您愿意，我可以向您展示我的网站的屏幕截图，其中使用的<iframe>看起来像<div>。

- Niet the Dark Absol

Answer 4

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

#loginBox input {...}

如果不可能的话，我会建议使用iframe。例如，您可以在计算器中添加一个脚本来调整其父级大小（通过parent.frameElement访问）。值得一提的是，HTML5有一个“seamless”属性，但目前浏览器兼容性仍然很差。

- Christophe

---

这是一个页面片段。我忘了提到在准备加载页面之前，我已经删除了所有这些标签。 - Liftoff

好的，我看到你有一个id为loginBox的登录框。如果你在所有样式前加上#loginBox前缀，就不会有冲突了。 - Christophe