我有一个托管在一个域和多个网站上的小部件,它们使用 iframe 来显示小部件。我希望 iframe 的内容根据父网站进行样式设置,但我知道由于同源策略,父网站无法操纵来自另一个域的内容。
我可以访问小部件和父网站,并且想知道根据父网站更改小部件样式的最佳方法是什么?我更喜欢一种方法,这意味着如果新网站需要包含 iframe 或现有网站更改了样式,我就不必更改小部件。
将父网站样式表的位置传递给小部件并使用它来设置小部件的样式是一个可行的想法,如果是,最好的方法是什么?
我有一个托管在一个域和多个网站上的小部件,它们使用 iframe 来显示小部件。我希望 iframe 的内容根据父网站进行样式设置,但我知道由于同源策略,父网站无法操纵来自另一个域的内容。
我可以访问小部件和父网站,并且想知道根据父网站更改小部件样式的最佳方法是什么?我更喜欢一种方法,这意味着如果新网站需要包含 iframe 或现有网站更改了样式,我就不必更改小部件。
将父网站样式表的位置传递给小部件并使用它来设置小部件的样式是一个可行的想法,如果是,最好的方法是什么?
我建议在您的小部件所在的服务器上创建一个基于查询字符串参数返回 CSS 的 Web 服务。小部件 iframe 可以加载位于外部的资源,前提是它们在 HTML 中明确定义,而不是动态附加到 DOM(想想 Google 托管的 JavaScript 库,例如 jQuery 和相关的 CSS)。
另一种解决方案,假设您使用的是现代浏览器,您可以使用window.postMessage
此 API 允许您将事件(以及随之而来的数据……例如 CSS 字符串)从父窗口分派到子窗口。
在托管小部件的服务器上,您可以使用以下命令获取来自请求的页面(如果您使用 php):
$_SERVER["HTTP_REFERER"]
基于此,您可以为小部件使用不同的样式。