How to load a hyperlink from one iframe to another iframe ?

Last Updated : 25 Jul, 2021

HTML Iframe or inline frame allows embedment of multiple HTML pages in an HTML page. In this article, we will see how to change the content of one iframe using hyperlinks in another iframe.

This can be achieved by the proper usage of the name attribute in the iframe tag and the target attribute in the anchor tag. The name attribute allows each inline frame to have its own unique name while the target attribute tells the hyperlinks, where the page has to be opened when the link is clicked. Our problem will be solved if we keep the value of the target as the name of the destination iframe where the hyperlink contents should be displayed.

We will create an HTML page consisting of two iframes.
Give each iframe a unique name.
Create another HTML page with multiple hyperlinks in it.
Add the name of the second iframe in the target attribute of every hyperlink.
Click the links in the first iframe, and you should see the pages opening in the second iframe.

Example: The HTML document will embed two iframes inside it.

index.html

<!DOCTYPE html> 
<html> 
  <body> 
    <center> 
      <h2>Hello world!!</h2> 
      <br /> 
      <iframe src="iframe1.html" 
              name="iframe1" 
              width="70%" 
              height="250"> 
      </iframe> 
      <br /><br /> 
      <iframe src="" 
              name="iframe2" 
              width="70%" height="300"> 
      </iframe> 
    </center> 
  </body> 
</html> 

The following code is the content for “iframe1.html” used in the above code.

iframe1.html

<!DOCTYPE html> 
<html> 
  <body> 
    <center> 
      <h1 style="color: green">GeeksforGeeks</h1> 
  
      <p> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210720232031/gfglogo-300x300.png"
          target="iframe2">GfG Logo</a> 
      </p> 
  
      <p> 
        <a href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210720234436/gfglogo2-300x300.jpg"
          target="iframe2">GfG Logo 2</a> 
      </p> 
  
      <p> 
        <a href= 
"https://www.youtube.com/embed/sa9l-dTv9Gk" target="iframe2"> 
          GfG youtube video 
        </a> 
      </p> 
  
      <p>click the above links to see changes in the frame below</p> 
    </center> 
  </body> 
</html> 