access iframe inside another iframe

coldfire7

Apr 21st 2009, 4:37 am

NOTE: Its a solution but I need some feedback on more possibilities of achieving this

I have 2 iframes. Say ifrm1 and ifrm2

I want to hide the buttons in ifrm1 and ifrm2 from the main page whereas the ifrm2 is in ifrm1. and ifrm1 is on main page (Mainpage.php)

"MainPage.php"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="javascript">
function HideLogin() {

window.frames['ifrm1'].document.getElementById("contentBtn").style.display= "none";
window.frames['ifrm1'].window.frames['ifrm2'].document.getElementById("testiframeBtn").style.display= "none";
}
</script>
</head>

<body>

<input type="submit" onclick="HideLogin()" />
<iframe src="content.php" name="ifrm1" id="ifrm1"></iframe>

</body>
</html>

"content.php"

<html>
<body >content.php
<input type="submit" name="contentBtn" id="contentBtn" />
<iframe src="testiframe.php" name="ifrm2" id="ifrm2"></iframe>
</body>
</html>

"testiframe.php"

<html>
<body >
testiframe.php
<input type="submit" name="testiframeBtn" id="testiframeBtn" />
<p>Frame Contents</p>
</body>
</html>

i have used various combinations but this works well:

window.frames['ifrm1'].document.getElementById("contentBtn").style.display= "none";
window.frames['ifrm1'].window.frames['ifrm2'].document.getElementById("testiframeBtn").style.display= "none";

the nested iframe functionality can be achieved in the same way e.g.

window.frames['ifrm1'].window.frames['ifrm2'].window.frames['ifrm3'].document.getElementById("XXXBtn").style.display= "none";

//to hide the 2nd iframe
window.frames['ifrm1'].document.getElementById("ifrm2").style.display= "none";

//to hide the 3rd iframe
window.frames['ifrm1'].window.frames['ifrm2'].document.getElementById("ifrm3").style.display= "none";

if you know any other possible combinations than dont forget to post them.