<!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
>
<
a
href
=
"javascript:void(0)"
onclick="document.getElementById(
document.getElementById(
'my-iframe1').removeAttribute('srcdoc');">
iframe 01
</
a
>
target
=
"my-iframe2"
>
iframe 02
</
a
>
<
a
href
=
"javascript:void(0)"
onclick
=
"showpage()"
>iframe 03</
a
>
<
a
href
=
"#my-iframe4"
>iframe 04</
a
>
<
a
href
=
"javascript:void(0)"
onclick
=
"myFunction1()"
>iframe 05</
a
>
<
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.removeAttribute("srcdoc");
}
</
script
>
<
script
>
function myFunction1() {
var x = document.getElementById("my-iframe5");
}
</
script
>
<
script
>
function myFunction2() {
document.getElementById("my-iframe6").src = y;
}
</
script
>
</
html
>