How to Target a Frame with a Hyperlink in JavaScript?

Last Updated : 08 Oct, 2024

Targeting a specific frame from a hyperlink using JavaScript allows for better content control in web applications.

NOTE: 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 an 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.

html

<!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() {
        let e1 = document.getElementById("my-iframe3");
        e1.src = "https://ide.geeksforgeeks.org/";
        e1.removeAttribute("srcdoc");
    }
</script>
<script>
    function myFunction1() {
        let x = document.getElementById("my-iframe5");
        x.data = "https://ide.geeksforgeeks.org/";
    }
</script>
<script>
    function myFunction2() {
        let y = document.embeds.src = "https://ide.geeksforgeeks.org/";
        document.getElementById("my-iframe6").src = y;

    }
</script>

</html>