Question

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

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

感谢您的帮助。

CODE：

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

任何其他解决方案都会很乐意接受！

Answer 1

也许你可以将一个较少的iframe放入div

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

iframe应占用div的整个宽度

Answer 2

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

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

Answer 3

如果要在div中加载整个页面，包括body标签，这绝对是错误的。您应该加载页面片段（计算器页面中的特定div）。在这种情况下，只需为此特定div提供一个唯一ID，并根据此ID构建导入的样式表以避免冲突：

#loginBox input {...}

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

Answer 4

要使iframe在Mozilla中正常工作，您需要使用em作为单位而不是px，或者如果超出div限制则使用正常％。

在几个FireFox论坛上提出了这个问题，但显然他们似乎对使用iframe存在一些安全问题。

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

我创建了一个页面，其中有三个iframe一个接一个（我知道大多数人不喜欢它，但我是初学者）并且它们在所有浏览器中都能很好地工作。

你需要通过实际尝试来确定em。

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

希望这有助于每个人阅读我的帖子。如果你认为我错了，请发表评论。我很感激你的帮助。谢谢！

有没有办法让div工作像iframe？

4 个答案: