How to force link from iframe to be opened in the parent window

html

prompt-engineering

responsive-design

best-practices

byNikita Barsukov·Jan 9, 2025

Force links in an iframe to open in the parent window by using the target="_parent" attribute within <a> tags:

<!-- Inside the iframe's document -->
<a href="http://stackoverflow.com" target="_parent">Open on Stackoverflow</a>

By deploying this strategy, links will break free from the confines of the iframe and blossom in the parent window.

Base tag in the spotlight

The power of the base tag

The <base> tag comes into play in broad-sweeping iframe page modifications. It defines the default behavior for hyperlinks and images. Place it in your iframe's <head> section:

<!-- Consider the <head> zone of your iframe's document your control center -->
<base target="_parent">

Now, all links are set to break out of the iframe by default—a neat trick saving you from target="_parent" repetition on every link. It's not magic, but we pretend it is!

Domain bound

The same-origin policy reminds us that the iframe and parent must occupy the same domain for target="_parent" interaction. Navigating the stormy seas of browser security could be a whirlwind without this remembering this critical requirement.

Compatibility concerns

It's also a good practice to keep an eye on browser support for the <base> tag. Sneak a peek at caniuse it? for compatibility insights.

Javascript and jQuery to the rescue

Dynamic control with JavaScript

JavaScript adds a new layer of control to your task. Here's a JavaScript workaround to forcibly open a link in the parent window:

<a href="#" onclick="window.top.location='http://stackoverflow.com'">Open on Stackoverflow</a>

Doesn't JavasScript feel a bit like being a puppet master?

A touch of jQuery

Choosing a jQuery approach makes dealing with a mountain of iframes or links seem more like a molehill. Use .contents() to pinpoint <a> tags and adjust their attributes:

$('iframe').contents().find('a').attr('target', '_parent');

In the blink of an eye, every <a> link nestled within an iframe is set to _parent, sending those links directly to the parent window. jQuery, making life easier since 2006!

Play it your way

Specify what opens where

Maybe you don't want every link to open in the parent window. For these instances, affix target="_parent" to individual <a> elements:

<a href="http://lovely-exception.com" target="_parent">Open a pleasant surprise in the parent window</a>

Getting to the top-level

If your aim is to open a link in the top-level browsing context (When you're dealing with nested iframes), swap _parent with _top:

<!-- Line up the link escape hatch to top level, today! -->
<a href="http://another-example.com" target="_top">Open in the top-most frame</a>

Stay safe, folks!

Security matters when you're meddling with iframe link behaviors. Be meticulous about URL validation and ward off potential clickjacking or other malicious attacks from infiltrating your code. Always practice safe browsing!

explain-codes / Html / How to force link from iframe to be opened in the parent window

Linked

Redirect parent window from an iframe action



Is an empty iframe src valid?



How to get the anchor from the URL using jQuery?



How to prevent IFRAME from redirecting top-level window



How to identify if a webpage is being loaded inside an iframe or directly into the browser window?

