How can a particular frame be targeted, from a hyperlink, in JavaScript?

Last Updated : 31 Jul, 2019

The frames element was used to break a single browser window into multiple independent browsing contexts.
Frames have been deprecated and should not be used by modern websites like HTML 5 type.
However the ability to place one document inside another still exists through iframes, tags like object, embed etc..

There are two approaches mainly followed:

Target frame without using JavaScript
// Target attribute has iframe name as its value

<a href="#" target="frame-name" >Link</a>

//Name attribute has name of the iframe

<iframe src="" name="frame-name"></iframe>

Target frame using JavaScript:

//General syntax 
document.getElementById("frame-id").src = "url"; 
  
//If object tag used 
x = document.getElementById("frame-id"); 
x.data = ""; 
//If iframe tag used 
x = document.getElementById("frame-id"); 
x.src = ""; 
//If embed tag used 
x = document.embeds.src = ""; 
document.getElementById("frame-id").src = x; 

Example: To Demonstrate how can a particular frame be targeted, from a hyperlink, in JavaScript.

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
  
    <style> 
        a:link { 
            color: #FFF; 
            background-color: #000; 
            font-weight: bold; 
            text-decoration: none; 
            cursor: pointer; 
            border: 2px solid yellow; 
            border-radius: 12px; 
            padding: 7px; 
            display: inline-block; 
        } 
          
        a:visited { 
            color: #FFF; 
            background-color: #000; 
            font-weight: bold; 
            text-decoration: none; 
            cursor: pointer; 
            border: 2px solid yellow; 
            border-radius: 12px; 
            padding: 7px; 
            display: inline-block; 
        } 
          
        #my-iframe1 { 
            border: 2px solid red; 
            border-radius: 20px; 
        } 
          
        #my-iframe2 { 
            border: 2px solid blue; 
            border-radius: 20px; 
        } 
          
        #my-iframe3 { 
            border: 2px solid green; 
            border-radius: 20px; 
        } 
          
        #my-iframe4 { 
            border: 2px solid grey; 
            border-radius: 20px; 
        } 
          
        #my-iframe5 { 
            border: 2px solid brown; 
            border-radius: 20px; 
        } 
          
        #my-iframe6 { 
            border: 2px solid orange; 
            border-radius: 20px; 
        } 
          
        #iframes { 
            padding: 20px; 
        } 
    </style> 
  
</head> 
  
<body> 
    <p>How can a particular frame be targeted,  
      from a hyperlink, in JavaScript?</p> 
    
    <!--Target frame  using JavaScript-->
    <a href="javascript:void(0)" 
       onclick="document.getElementById( 
                'my-iframe1').src='https://ide.geeksforgeeks.org/'; 
                document.getElementById( 
                'my-iframe1').removeAttribute('srcdoc');"> 
      iframe 01 
  </a> 
    <!--Target frame without using JavaScript-->
    <a href="https://ide.geeksforgeeks.org/"
       target="my-iframe2"> 
      iframe 02 
  </a> 
    
    <!--Targeting frame  using JavaScript-->
    <a href="javascript:void(0)" onclick="showpage()">iframe 03</a> 
    <!--Targeting frame without using JavaScript just using frame name-->
    <a href="#my-iframe4">iframe 04</a> 
    <!--Targeting frame  using JavaScript-->
    <a href="javascript:void(0)" onclick="myFunction1()">iframe 05</a> 
    <!--Targeting frame  using JavaScript-->
    <a href="javascript:void(0)" onclick="myFunction2()">iframe 06</a> 
  
    <div id="iframes"> 
        <iframe src="" 
                height="150px"
                width="100%" 
                name="my-iframe1" 
                id="my-iframe1"
                srcdoc="<html> 
                        <body style='background-color:#fcb;color:red;'> 
                        <h1>Frame 01</h1> 
                        </body> 
                        </html>"> 
      </iframe> 
        
        <iframe src="" 
                height="150px"
                width="100%" 
                name="my-iframe2"
                id="my-iframe2" 
                srcdoc="<html> 
                        <body style='background-color:#b9f;color:blue;'> 
                        <h1>Frame 02</h1> 
                        </body> 
                        </html>"> 
      </iframe> 
        <iframe src="#" 
                height="150px"
                width="100%" 
                name="my-iframe3" 
                id="my-iframe3" 
                srcdoc="<html> 
                        <body style='background-color:#be9;color:green;'> 
                        <h1>Frame 03</h1> 
                        </body> 
                        </html>"> 
      </iframe> 
        <iframe src="" 
                height="150px"
                width="100%" 
                name="my-iframe4" 
                id="my-iframe4"
                srcdoc="<html> 
                        <body style='background-color:#eee;color:grey;'> 
                        <h1>Frame 04</h1> 
                        </body> 
                        </html>"> 
      </iframe> 
        
        <object width="100%" 
                height="150px" 
                name="my-iframe5"
                id="my-iframe5" 
                style='background-color:#ffa;color:brown;'> 
            
            <h1>Frame 05</h1></object> 
        <embed id="my-iframe6" width="100%" height="150px" /> 
    </div> 
</body> 
<script> 
    function showpage() { 
        var e1 = document.getElementById("my-iframe3"); 
        e1.src = "https://ide.geeksforgeeks.org/"; 
        e1.removeAttribute("srcdoc"); 
    } 
</script> 
<script> 
    function myFunction1() { 
        var x = document.getElementById("my-iframe5"); 
        x.data = "https://ide.geeksforgeeks.org/"; 
    } 
</script> 
<script> 
    function myFunction2() { 
        var y = document.embeds.src = "https://ide.geeksforgeeks.org/"; 
        document.getElementById("my-iframe6").src = y; 
  
    } 
</script> 
  
</html> 