jquery - 如何隐藏从另一个域加载的 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 与其主机位于不同的域中，则无法在 iframe 的 .contents() 上运行 JavaScript。因此，我首先假设 $("#ulBlock").contents() 为 null 或不可访问。否则，您只需 find() 所需的 div 并使用 jQuery 更改其 css。

对于您是否存在 CSS 技巧的问题，简短的回答是否定的。虽然没有 CSS 技巧，但有几种方法可以实现您想要的:

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

• 利用 CORS 。虽然一些较旧的浏览器仍然不支持它，并且我了解到 CORS 被认为是一个轻微的安全漏洞，但它允许您访问 iframe 内容并运行脚本来更改 iframe 的内容。简而言之，它涉及包含一个名为 Access-Control-Allow 的 header 。也许值得查找一下。

• 传递浏览器消息来回和第四次。我认为 Daniel Park 在编写一个允许在 iframe 之间发布浏览器消息的插件方面做得非常出色。大多数现代浏览器都支持此功能。访问他的网站:http://postmessage.freebaseapps.com/ 。向下滚动到显示示例的位置。他专门编写了该插件来与 iframe 配合使用。我在我们的一个商业应用程序中使用了他的代码。

请记住，在上述所有情况下，您都必须有权访问 iframe 主机和正在嵌入的页面的源代码。