...

View Full Version : [ASK]Accessing outside elements from an iframe



alvin_bilian
12-21-2006, 09:30 AM
I have a page:


<html>
<body>
<b id="btext">Hi! I am a bold text</b><br>
<i id="itext">And I am a italic text</i>
<iframe name="myiframe" width="200px" height="100px" src="myframe.html"></iframe>
</body>
</html>


And wat i wanna do is like changing the font color of that <b id="btext"> element from myframe.html.
In other words, [B]styling[

Can that kind of things will happen?
How to do this?
Please help me guys!...

coothead
12-21-2006, 10:59 AM
Hi there alvin_bilian,

try it like this...

mypage.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
div {
margin:5px 0;
}
#btext {
font-weight:bold;
}
#itext {
font-style:oblique;
}
#myiframe {
width:200px;
height:100px;
}
.red {
color:#f00;
}
</style>

</head>
<body>

<div id="btext">Hi! I am a bold text</div>
<div id="itext">And I am a italic text</div>

<div><iframe id="myiframe" src="myframe.html" scrolling="0"></iframe></div>

</body>
</html>

myiframe.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
margin:0;
padding:0;
}
#changer {
line-height:30px;
text-align:center;
margin:35px 0;
cursor:pointer;
}
</style>

<script type="text/javascript">
window.onload=function() {
document.getElementById('changer').onclick=function() {
parent.document.getElementById('btext').className='red';
}
}
</script>

</head>
<body>

<div id="changer">change btext color</div>

</body>
</html>

coothead

alvin_bilian
12-22-2006, 05:07 AM
Nice Dude!! Its working!!
Thanks!!:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum