如何隐藏从另一个域加载的iframe中元素的背景颜色？

Question

由于同源策略，从父窗口访问iframe元素存在限制。是否有CSS hack或变通方法允许我们隐藏背景颜色或至少使其显得透明？

编辑：

iframe的ID为ulBlock，其中包含ID为listgroup

的div

#listgroup {
background: none repeat scroll 0 0 #F4F4F4;
border-color: #FDF6E5;
border-left: 1px solid #FDF6E5;
border-right: 1px solid #FDF6E5;
border-style: solid;
border-width: 1px;
margin: 0;
padding: 0;
}

#ulBlock {
height: 321px;
visibility: visible;
}

Answer 1

显然，由于相同的原始策略，如果它位于与其主机不同的域上，则无法在iframe的.contents()上运行JavaScript。所以我首先假设$("#ulBlock").contents()是null或无法访问。否则，您只需find()所需的div并使用jQuery更改其CSS。

你的问题的简短答案是否有CSS技巧是没有的。虽然没有CSS技巧，但有几种方法可以实现您的目标：

• 刷新iframe并在query string中传递一些信息，以便在iframe中重新加载的页面知道隐藏或透明你所指的div。

• 利用CORS。虽然一些旧的浏览器仍然不支持它，并且我已经读过CORS被认为是一个温和的安全漏洞，它将允许您访问iframe内容并运行脚本来更改iframe的内容。简而言之，它涉及包含一个名为Access-Control-Allow的标题。可能值得一看。

• 将浏览器消息传回。我认为Daniel Park在编写插件方面做得很好，允许在iframe上发布浏览器消息。大多数现代浏览器都支持此功能访问他的网站：http://postmessage.freebaseapps.com/。滚动到它说的例子。他特意写了这个插件来处理iframe。我在他们的一个商业应用程序中使用了他的代码。

请注意，在上述所有情况下，您都必须能够访问iframe主机和嵌入页面的来源。