Skip to content
Related Articles

Related Articles

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:

  1. 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>
  2. 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-->
       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>

Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :