如何跨域更改 iframe 内容的样式？

Posted 2023-03-06

【中文标题】如何跨域更改 iframe 内容的样式？

【英文标题】：How to change style of iframe content cross-domain?

【发布时间】：2011-06-11 03:03:38

【问题描述】：

我想将 iframe 内的内容的背景颜色设置为黑色，文本颜色设置为白色，而不是默认的普通白色背景和黑色文本。 iframe src 属性指向我无权访问或无法在该域中放置任何文件或样式表的不同域。因此，鉴于这些条件，是否可以在 iframe 内容中进行这些样式更改，如果可以，那么如何进行？

【参考方案1】：

唯一的可能是通过您的代理加载 iframe 内容并修改 html 内容。您无法通过 javascript 从其他域访问 iframe。

【讨论】：

@Brune 我猜我的答案不再有效。见：en.wikipedia.org/wiki/…

如果你还有这个，请分享示例代码

【参考方案2】：

这是不可能的。 Same Origin Policy 的全部意义在于您无法访问或操作来自其他域的内容。

【讨论】：

-1：指出同源策略是好的。但是，我们不能说这是不可能的，因为它当然可以做到，尽管需要付出一些巨大的努力，就像 Sean 的回答，或者最少的努力，就像 scmehetio 的回答一样..

@JonathanM：我不确定它是否值得投反对票，这在技术上是正确的。确实，不可能修改受同源策略保护的 iframe。与肖恩的答案一起去很好，但它不再是跨域 iframe。它还可以防止您必须处理的大量其他问题，例如一个问题的相对 URL。至于其他答案 IE 过滤器仅适用于 IE。所以我完全支持这个答案......但是，无论如何:-)

您对消除同源情况的答案提出了很好的观点。已删除反对票。 （不得不做一个小的编辑，以方便删除downvote；所以它被锁定了。）

嗯，答案是正确的。您无法更改 iframe 的内容。在 Sean 的回答中，您不会更改 iframe 的内容，而是更改内容之前它成为 iframe 的内容。

【参考方案3】：

这个已经在这里有一段时间了，但希望这会对某人有所帮助....

我能看到的最接近的是在 iframe 上使用过滤器

Xray：将其变为黑白，然后将其反转。

 <iframe style="filter:xray" src=".....

反转：反转所有颜色，而不仅仅是交换黑白。

 <iframe style="filter:invert" src=".....

两者都只适用于 IE。 直到几分钟前，我还以为这些仅适用于图像...

例如。 http://www.ssi-developer.net/css/visual-filters.shtml