由于同源策略,从父窗口访问 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;
}
最佳答案
显然,由于同源策略,如果 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 主机和正在嵌入的页面的源代码。
关于jquery - 如何隐藏从另一个域加载的 iframe 中元素的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11912482/