How to Navigate to a URL from an IFrame

IFrame Navigation could be confusing at times. If you are using IFrame to display content on your web page and you have a hyperlink in this IFrame’s content, you might have noticed that clicking on this hyperlink navigates to the href target page within that IFrame. In this article, I am going to share a very simple way to open the link in the browser window/tab, rather than in the IFrame itself.

Example of IFrame Navigation

Let’s say you have a page called a.html. You have an IFrame in this page and you have specified the content of this IFrame in a page called iframe_content.html. This IFrame consists of a hyperlink that points to 1.html. When you view the page in the browser and click on the hyperlink, you will notice that the page 1.html is navigated to, from within the IFrame. Not what you expected, eh? Normally, we expect the hyperlink to navigate to the target page in the current window/tab of your browser so that the transition appears seamless. But this is not possible if you are using the following regular code to point to the page:

<a href="1.html">Navigate to 1.html page</a>

In order to navigate to a URL in the browser window from an IFrame, you will need to modify the above html code slightly. Revised html code to navigate to a URL from an IFrame is:

<a href="1.html" target="_top">Navigate to 1.html page</a>

Now when you click on the above modified hyperlink, you will notice that the page will no longer be navigated to, within the IFrame. Instead, the destination page, i.e. 1.html will be loaded in your browser tab/window just as any other hyperlink navigation would, outside of the IFrame.

There is one more attribute that let’s you achieve the same result. Consider the following HTML code:

<a href="1.html" target="_parent">Navigate to 1.html page</a>

The above  code achieves the same result as the previous code.

I know, the next question you have is, why are there two attribute instead of just one to achieve the same result? Well, here’s the difference.

Using _top:

This is most useful if you have embedded multiple IFrames in a web page i.e, you can have an IFRAME inside an IFRAME and if you have a hyperlink within the innermost IFrame, then _top target opens links in the highest level window in the series, removing all the iframes.

Using _parent:

When you set the target attribute to _parent, the hyperlink will open in the web page that is holding the iframe.

Your turn!

Do you know of any other ways of IFrame navigation? Feel free to share by commenting below.