Is there a way to have content from an IFRAME overflow onto the parent frame?

I have a UI widget that needs to be put in an IFRAME both for performance reasons and so we can syndicate it out to affiliate sites easily. The UI for the widget includes tool-tips that display over the top of other page content. See screenshot below or go to the site to see it in action. Is there any way to make content from within the IFRAME overlap the parent frame's content?

No it's not possible. Ignoring any historical reasons, nowadays it would be considered a security vulnerability -- eg. many sites put untrusted content into iframes (the iframe source being a different origin so cannot modify the parent frame, per the same origin policy).

If such untrusted content had a mechanism to place content outside of the bounds of the iframe it could (for example) place an "identical" login div (or whatever) over a parent frame's real login fields, and could thus steal username/password information. Which would suck.

I couldn't find a way to make the content of the frame flow out of the frame, but I did find a way to hack around it, by moving the tooltip into the parent document and placing it above (z-index) the iframe.

The approach was:

1. find the iframe in the parent document
   
2. remove the tooltip element from where it is in the DOM, and add it to the parent document inside the element that contains your iframe.
   
3. you probably need to adjust the z-index and positioning, depending on how you were doing that in the first place.

You can access the parent document of an iframe using parent.document.

jQuery(tooltip).remove();
var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode;
iframeParent.appendChild(tooltip);
//adjust z-index, positioning

This may be off the mark either because it's unsuitable in light of your requirements, or it may not actually help (!), but it might be worth checking out UFrame. It's a kind of hybrid of iframe and div, and could probably be packaged up as a widget (your best bet would be to give clients a <script> tag which would suck in UFrame and the relevant markup). What I'm not sure about is whether you can achieve the overlay you require, but it's possibly worth a play around with. Sorry I can't be more specific but it's not something I've actually used myself, I just bookmarked it a while back for future reference.

if you know the absolute top of value that tool top can have you can create a div that is the height of the content + the highest distance the tool tip will display in. Align the iframe to the bottom of the div. make sure the iframe and div are transparent. then the iframe content with the tool tip should display. Though this is setting your self up for the headache of making sure stuff like highlighting work the same in all browsers.

Nest your current iframe and the suggested div, inside of a parent iframe, then drop in your parent iframe to 3rd parties, best of both worlds!

As far as I know it cannot be done. Why not use an XHR request and populate a div instead?

I've found a way to do that for a similar problem, but this requests the ability to make some modifications in the parent content.

Quick context:

I'm managing a website that gets some data related to some partners through our own API, and presents it in a nice way with a lot of filtering options. Some of our partners are interested in showing this data on their own website, but the development of their own UI to show the API data is something they can't afford, for a lot of them.

We first suggested to integrate our UI into an iframe on their website, but this way the data couldn't be indexed by external search engines such as Google. So we switched to the opposite principle: we integrate the top menu from their site in an iframe that is placed in our UI.

Problem:

Their header menus often contain some dropdown sub-menus. These submenus can't overflow the iframe height and are truncated.

Solution:

• Set the iframe in css position "absolute" with a high z-index, so the iframe overlays the parent UI.
• In the iframed content, identify the classes of the objects that can overflow the iframe box (in our case, we ask the menu owner to add a specific class name to these elements, but you can deal with existing class names).

Then in a JS:

• Get the height of the iframe content (so the height of the header without any dropdown lists displayed).
• Set the initial iframe height to this height.
• Shift the parent UI content with a margin that equals this height, not to be overlaid by the default iframe content.
• Add an event listener that sets the iframe height to 100% when the mouse is over the specific classes that have been identified. In this state the iframe content can fully overlays the parent content.
• Add an event listener that set back the iframe height to its original size when the mouse gets out of the specific classes. In this state everything is back to normal.