Div over iframe that is from iframe itself

Question

I have a div that is contain inside an iframe from a external html

<iframe src="test.html">

The html based "context menu" need to be on top of the iframe but the html code of the context menu is in the iframe itself. A pure CSS solution is preferred.

Answer 1

As long as both frames are in the same domain, you could use Javascript to move the DOM element to the parent frame (window.parent.document.appendChild(...)). I have done this and it works. It's just a lot of hassle and you must decide yourself whether it's worth it.

Be sure to check out bobince's comment on the issue below on how to do it.

Don't forget the child frame's style sheets don't apply to the menu once you move it to the parent.

Answer 2

Your really duplicating typical "Ajax" functionality, since its already been abstracted by many frameworks (like jQuery), and you are not likely to do it any better I'd give that a shot. Don't reinvent the wheel.

You can find a great example here.

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Answer 3

The contents of an iframe cannot be displayed outside of the iframe. Within the iframe, you can have the div appear over other elements using "position: absolute" and "z-index: 1000" (or another appropriately large number). Note that absolutely positioned elements are removed from the flow of the document. The position can be set using the "top", "left", "right", and "bottom" CSS properties.