How can a particular frame be targeted, from a hyperlink, in JavaScript?
- 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.w3wiki.net/' ; document.getElementById( 'my-iframe1').removeAttribute('srcdoc');"> iframe 01 </ a > <!--Target frame without using JavaScript--> < a href = "https://ide.w3wiki.net/" 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.w3wiki.net/"; e1.removeAttribute("srcdoc"); } </ script > < script > function myFunction1() { var x = document.getElementById("my-iframe5"); x.data = "https://ide.w3wiki.net/"; } </ script > < script > function myFunction2() { var y = document.embeds.src = "https://ide.w3wiki.net/"; document.getElementById("my-iframe6").src = y; } </ script > </ html > |
Output: