如何在不同域上设置 iframe 内容的样式？答案

【问题标题】：How to style content of iframe on different domain?如何在不同域上设置 iframe 内容的样式？
【发布时间】：2012-11-02 21:01:26
【问题描述】：

我在一个域和多个网站上托管了一个小部件，这些网站使用 iframe 来显示小部件。我希望 iframe 的内容根据父网站设置样式，但我知道由于Same Origin Policy，父网站无法操纵来自另一个域的内容。

我可以访问小部件和父网站，但想知道根据父网站更改小部件样式的最佳方法是什么？我更喜欢一种方法，这意味着如果新网站需要包含 iframe 或现有网站更改了样式，我就不必更改小部件。

将父网站样式表的位置传递给小部件并使用它来设置小部件的样式是一个可行的想法吗？如果是，最好的方法是什么？

【问题讨论】：

不能作为查询字符串参数传入吗？
您可以使用 JavaScript 包含小部件，然后根据某些设置构建小部件的 URL。这将使人们能够轻松地包含它。您也可以在小部件站点上生成它。像widget.com/widget.html?color=#333&bg=red&size=12 这样的东西就可以了。如果您将其作为文件包含在 widget.com/widget.html?css=//example.com/css/style.css 中，请务必避免 XSS 等。安全在这里很重要。很多事情都可能发生。

【解决方案1】：

我建议在您的小部件所在的服务器上创建一个基于查询字符串参数返回 CSS 的 Web 服务。小部件 iframe 可以加载位于外部的资源，前提是它们在 HTML 中明确定义，而不是动态附加到 DOM（想想 Google 托管的 JavaScript 库，例如 jQuery 和关联的 CSS）。

另一种解决方案，假设您使用的是现代浏览器，您可以使用window.postMessage

此 API 允许您将事件（以及随之而来的数据......例如 CSS 字符串）从父窗口分派到子窗口。

【讨论】：

【解决方案2】：

在您托管小部件的服务器上，您可以通过使用（如果您使用 php）获取来自请求的页面：

$_SERVER["HTTP_REFERER"]

基于此，您可以为小部件使用不同的样式。

【讨论】：