Live data from Hacker News

How Google +1 Widgets "Break Out" of their IFRAMEs

stackoverflow.com

1–10 of 15 posts

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#4
Google +1 widgets don't "break out" of their iframes. They're not in iframes in the first place.

As the first SO response points out, the widget is JavaScript code that runs in the host page, so it can easily create and manipulate any kind of DOM element anywhere in that page. Of course there may be iframes among those elements, but the JS code isn't limited to that.

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#5

Google +1 widgets don't "break out" of their iframes. They're not in iframes in the first place. As the first SO response points out, the widget is JavaScript code that runs in the host page, so it can easily create and manipulate any kind of DOM element anywhere in that page. Of course there may be iframes among those elements, but the JS code isn't limited to that.

They are in s. Just not one , and the code is not originally included via .

But yeah, since it creates the illusion of breaking out, the submission title has the phrase in quotes.

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#7
Another advantage of using an iframe (besides cross-domain communication) is that you don't have to reset every CSS style you need. When you insert JavaScript into a page it inherits all the crazy CSS already on the page which can cause all sorts of problems. Iframes have their own context and give you an easy way to avoid that problem.

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#8
post #5

Google +1 widgets don't "break out" of their iframes. They're not in iframes in the first place. As the first SO response points out, the widget is JavaScript code that runs in the host page, so it can easily create and manipulate any kind of DOM element anywhere in that page. Of course there may be iframes among those elements, but the JS code isn't limited to that.

They are in s. Just not one , and the code is not originally included via . But yeah, since it creates the illusion of breaking out, the submission title has the phrase in quotes.

That's right, the bulk of the gadget may run in one or more iframes. I just meant that they do load a script element into the host page.

Once you do that you can do anything to the page, and you can also use one of several methods to have this script communicate with scripts inside the iframes that it creates.

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#9

Another advantage of using an iframe (besides cross-domain communication) is that you don't have to reset every CSS style you need. When you insert JavaScript into a page it inherits all the crazy CSS already on the page which can cause all sorts of problems. Iframes have their own context and give you an easy way to avoid that problem.

Yup.

Interesting tidbit: HTML5 suggests the `seamless` attribute for elements, which would cause those CSS styles to actually affect the contents of the (and some other changes, like links affecting the location of the parent window). http://www.w3.org/TR/html5/the-iframe-element.html#the-ifram...

(Of course, you meant to say “when you insert typical content DOM nodes”, not “insert Javascript”.)

Re: How Google +1 Widgets "Break Out" of their IFRAMEs

#10

Another advantage of using an iframe (besides cross-domain communication) is that you don't have to reset every CSS style you need. When you insert JavaScript into a page it inherits all the crazy CSS already on the page which can cause all sorts of problems. Iframes have their own context and give you an easy way to avoid that problem.

An iframe also helps in IE6 (can't directly remember if it's also in IE7) to draw overlays over form elements, otherwise they will be on top.
Post reply on HN