traversing/selecting an element in nested iframe/framesets
I am trying to manipulate the DOM of a page that is nested in both an iframe and an old frameset. To preserve backward compatibility I can't just modify all the frameset pages to do my manipulation there.
So within my tester page I'm able to add an event handler to the iframe to kick off when it's ready, but then I need to do the same on the headerframe in the frameset page, but I can't quite figure out the syntax to do that. Then in that event handler I simply want to make the <p> tag disappear.
Any help?
Thanks
Dave
frametester.html:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#iframebody').load( function(){
alert("iframebody loaded, now how do I attach an event listener on the frameheader?");
});
});
</script>
</head>
<body>
<iframe id="iframebody" src="frameset.html"
width="100%" height="100%" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0"/>
</body>
</html>
frameset.html:
<html>
<frameset id="myframes" framespacing="0" frameborder="0" rows="100,*">
<frame id="frameheader" scrolling="no" marginwidth="0" marginheight="0" src="header.html" noresize=""/>
<frame id="framebody" scrolling="no" marginwidth="0" marginheight="0" src="body.html" noresize=""/>
</frameset>
</html>
header.html:
<html>
<body>
<p id="headerTitle">Can this be removed from the DOM?</p>
</body>
</html>
body.html:
<html>
<body>
<p>Body</p>
</body>
</html>