0

我试图隐藏 IFrame 中显示的内容的某些元素，因为它属于 IFrame 标记。我可以控制基本页面和要在 IFrame 中显示的页面的 CSS（它们确实在不同的域上运行）。我认为我应该能够在 IFrame 内容的 HTML 中定义一个样式表规则，该规则仅适用于以下示例中的元素，但它不起作用。这是可能的，如果是这样，我做错了什么？

<style>
iframe div.header
{
    display:none;

}
</style>

编辑：为了澄清，我试图仅在页面位于 iFrame 中时应用样式。主要问题是，当我们在另一个站点中显示来自我们一个站点的内容时，我希望隐藏页眉和页脚。对我来说，应用上述风格来实现这一目标是合乎逻辑的。为什么我不能编写仅适用于 iFrame 内的元素的 CSS 规则（该规则可以在任一文件中，只要它有效）？我已经在主页和 iframe 内容页面中尝试过该规则。

4

3 回答 3

1

您不能更改/控制其他域上的页面。有关更多详细信息，请参阅同源政策。

此外，即使它们位于同一域 b/c 中，应用这样的样式也不起作用，iframe 中的内容是独立于父页面呈现的。

如果您可以访问这两个页面，为什么不将该样式放在 iframe 中显示的页面上呢？

于 2013-05-22T16:27:04.317 回答
1

尝试为 iFrame 大小编写规则，就像为移动设备编写规则一样：

@media (width: 500px) and (height: 350px) {
    .header{visibility:hidden}
}

如果 iFrame 宽 500 像素，高 350 像素。

唯一的问题是，我不确定这对移动设备会产生什么影响......但是我刚刚在一个网站上尝试过它并且它可以工作。

于 2013-12-23T12:41:32.950 回答
1

I think the closest you can get is using Javascript within the iFrame to check if the current document is the root document.

If it is then ignore, if not then apply a class to the body

于 2013-05-22T16:29:09.210 回答