3

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

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

谢谢你的帮助。

代码：

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

任何其他解决方案都将被欣然接受！

4

4 回答 4

2

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

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

iframe 应该占据 div 的整个宽度

于 2012-11-15T18:53:41.830 回答
0

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

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

于 2012-11-15T18:54:40.653 回答
0

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

#loginBox input {...}

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

于 2012-11-15T19:11:55.140 回答
0

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

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

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

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

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

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

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

于 2015-08-19T15:54:40.190 回答