How to create iframe content in another domain?

Question

I have a widget hosted on the same domain, and several websites that use an iframe to display the widget. I would like the iframe content to be styled based on the parent website, but I know that due to the Same origin policy, the parent website cannot manipulate content from another domain.

I have access to both the widget and the parent websites, and I was wondering what is the best way to change the style of the widget depending on the parent site? I would prefer a method that would mean that if the new website should include an iframe or an existing website, change their style, I would not have to change the widget.

Would pass the location of the stylesheet of the parent website to the widget and use this so that the widget's style is a workable idea, and what is the best way to do this, if so?

Answer 1

On the server hosting the widget, you can get the page where the request comes from using (if you use php):

$_SERVER["HTTP_REFERER"] 

Based on this, you can use different styles for the widget.

Answer 2

I would suggest creating a web service on the server where your widget is located, which returns CSS based on the querystring parameter. An iframe widget can load external resources provided they are explicitly defined in HTML and not dynamically added to the DOM (think of JavaScript libraries hosted by Google, such as jQuery and its associated CSS).

Another solution, assuming you are using a modern browser, you can use window.postMessage

This API allows you to send events (and data along with it ... for example, a CSS string) from the parent window to the child window.