How to Use Links in iframe?

To use links within an iframe and control where they open, you primarily use the target attribute on the anchor (<a>) tag.

As the reference states, when you create a document to be inside an iframe, any links in that frame will automatically open in that same frame by default. This means clicking a link inside the iframe will load the new page within that iframe container.

However, you often need links to open elsewhere, such as in a new tab or the main window outside the iframe. But with the attribute on the link (the <a> element or elements), you can specify where the links will open. This attribute is the target attribute.

Controlling Link Destinations with the target Attribute

The target attribute on an <a> tag tells the browser where to display the linked resource. By setting this attribute, you override the iframe's default behavior.

Here are the common values for the target attribute:

• _self: This is the default value for links within an iframe. It opens the linked document in the same frame the link was clicked in. You usually don't need to specify this, but you can for clarity.

  <a href="page.html" target="_self">Open in this frame</a>

• _blank: Opens the linked document in a new browser tab or window. This is useful for external links you don't want to replace the content within your iframe or main page.

  <a href="https://www.example.com" target="_blank">Open in a new tab</a>

• _parent: Opens the linked document in the parent frame of the current frame. If the iframe is not nested within other frames (i.e., it's directly in the main window), _parent behaves like _top.

  <a href="about.html" target="_parent">Open in the parent frame</a>

• _top: Opens the linked document in the full body of the window, canceling out all framesets. This is typically used to break out of an iframe and load the link in the main browser window.

  <a href="homepage.html" target="_top">Break out of iframe</a>

Targeting a Named Frame or iframe

You can also specify the name attribute on an iframe element:

<iframe src="initial-page.html" name="my-specific-iframe"></iframe>

Then, you can use this name as the value for the target attribute on a link anywhere on your page (either inside or outside another iframe) to specifically load the linked page within that named iframe:

<!-- Link inside another frame or on the main page -->
<a href="content-for-iframe.html" target="my-specific-iframe">Load content in specific iframe</a>

This allows for complex layouts where a link in one part of the page updates content in a different, named iframe.

Summary of target Attribute Values

By appropriately using the target attribute on your <a> elements, you have full control over where links clicked within or targeting an iframe will open, moving beyond the default behavior of opening within the same frame.