Question

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

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

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

Answer 1

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

$_SERVER["HTTP_REFERER"]

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

Answer 2

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

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

此API允许您从父窗口向子窗口分派事件（以及与其一起的数据......例如CSS字符串）。