Question

The scene: I’m writing an embeddable widget. It takes the form of a <script> tag, which builds an iframe containing everything it needs to display. The iframe has no src, and the script writes to it with theIframe.contentWindow.document.write(). This keeps the widget contained, and keeps element ids and script from conflicting with the page on which the widget is embedded.

The trick: The widget has to be able to change its size. To do this, it sets its containing iframe’s style.height. This requires access to the outer page’s DOM. In Firefox and IE, this is allowed, because the iframe’s document and the outer document are considered to share an origin.

The twist: In Safari, however, the two documents are considered not to share an origin. The inner document is considered to be at about:blank, while the outer document is clearly using a different protocol and “domain” (if blank can be considered the domain).

The question: How can I build an iframe programmatically whose document Safari/WebKit will consider to have the same origin as the document of the window creating it?

---

Edit: After further experimentation, I can’t find a way to programmatically create an iframe whose location is not about:blank regardless of whether I change its contents.

If I create the frame with document.createElement(), give it a src which points to a real HTML resource on the same origin called “foo.html”, and document.body.appendChild() it, Safari’s console shows the element as expected in the DOM, but the contents of the page do not appear, and the document is listed in the sidebar as “about:blank”.

If I include the HTML for the iframe directly in the page, the contents of foo.html appear, and “foo.html” appears in the sidebar.

If I insert the HTML using document.write(), I get the same result as with document.body.appendChild().

Both programmatic versions work in Firefox.

Answer 1

Aha. This seems to be a bug in WebKit. When an iframe is created programmatically, its src attribute is ignored. Instead, the frame defaults to about:blank and must be directed to a URL to point elsewhere. For example:

theIframe.contentWindow.location = theIframe.src