Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

Tool-tip content needs to overlap parent frame content

like image 791
Andrew Hedges Avatar asked Oct 06 '08 23:10

Andrew Hedges


People also ask

Can iframe access parents?

When a page is running inside of an iframe, the parent object is different than the window object. You can still access parent from within an iframe even though you can't access anything useful on it. This code will never cause an error even when crossing origins.

Are iframes bad practice?

Iframes Bring Security Risks. If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in.

Can you access iframe content?

You could use . contents() method of jQuery. The . contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.


2 Answers

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.

like image 179
olliej Avatar answered Oct 18 '22 14:10

olliej


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 
like image 43
DrShaffopolis Avatar answered Oct 18 '22 16:10

DrShaffopolis