Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :