Problem with iframe, links, and redirects

September 19, 2007 10:52 AM

I have a problem where I show a document within an iframe, and I wish to have links clicked within the iframe show in the toplevel window instead of the iframe. But there's a twist...

I can't (easily) modify the documents that are shown within the iframe.

The problem that comes about is, the target of these links has a bit of javascript that says "Am I in the toplevel window? No? Then set the toplevel href to my href". This nicely accomplishes the task of making sure the document displays in the toplevel and not the iframe.

However, this breaks the back button, because "back" goes b ack to where the current page is in the iframe, and it redirects forward again. This also breaks my nice javascript:history() back button.

Is there any way with css, javascript, iframe options, etc, to make sure that all links clicked within an iframe open in the parent frame?

posted by RustyBrooks to computers & internet (4 comments total)

(To be clear, I know about putting target=_parent in the links, but I'd *really* rather not parse the text to add this to each link if I don't have to)
posted by RustyBrooks at 10:55 AM on September 19, 2007

I don't know of any clean way to do that; setting the target on all links (and forms, for that matter) in the document in the iframe is the best way I know of.

Instead of parsing the inner HTML and messing with it, you could run a script in the outer document which would use the DOM to find links and forms in the inner document, then set their targets as necessary (if not already set). Of course you'd want to wait until the inner doc is fully loaded, which is tricky itself.

If there's a simple and robust solution to this, I'd love to know myself!
posted by xil at 2:08 PM on September 19, 2007

I made a regular expression, and it works for all my test cases, but I am really hesitant to put it out in the wild. Ditto for the javascript. Especially since, to me, this is just a minor annoyance (although it has been put to me to solve it.)
posted by RustyBrooks at 2:17 PM on September 19, 2007

JQuery was made specifically for easily selecting a set of DOM elements and applying changes to them.

I've not used it extensively, so I couldn't give you the exact code, but if you look here, under "Making Something Happen on Click", it should be fairly easy to modify that to change the target attribute.
posted by joquarky at 11:23 AM on September 20, 2007