How can a particular frame be targeted, from a hyperlink, in JavaScript?
Jun 30, 2022
Answers (1)
Add Answer
- 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>
