PDA

View Full Version : Send a JavaScript command from one iframe its parent?

heyseuss
09-08-2004, 06:50 AM
Hi

I'm trying out having two iframes. One is a hidden CSS layer, and the second should pass a URL to the first and also send a JavaScript command to the parent frame to 'show' the hidden layer. The CSS is fine, and I can get it to work when everything is in the same frame, so no problems there. But at present when you click a link from the second iframe, I believe the link is loading in the first iframe, but the iframe is not being made visible via the JavaScript.

The JavaScript functions for turning the CSS layers on and off are currently in the parent frame.

How do I send a javascript command from one iframe into the parent?

Below is the code I'm using at present in case it is helpful.




i've got one parent page with the following code:

<html>

<head>

<SCRIPT language=javascript>
IE = (document.all) ? 1:0;
NN = (document.layers) ? 1:0;

function hideLayer(name){
if (NN) {
eval('document.'+name+'.visibility = "hidden"');
}
else if (IE){
eval('document.all.'+name+'.style.visibility = "hidden"');
}
}

function showLayer(name){
if (NN) {
eval('document.'+name+'.visibility = "visible"');
}
else if (IE){
eval('document.all.'+name+'.style.visibility = "visible"');
}
}

</SCRIPT>

</head>

<body>


<DIV ID="layer1" style="visibility:hidden;">


<iframe name="iframe2" src="iframe2.html" align="top" height="200" width="95" hspace="10" vspace="10" align="middle">

</DIV>

<p>

<iframe name="iframe1" src="iframe1.html" align="top" height="200" width="95%" hspace="10" vspace="10" align="middle">

</body>

</html>



a page called iframe1.html with the code:


<a href="image.jpg" target="iframe2" onMouseUp="showLayer('layer1')">
Click me to show</a>


and a page called iframe2.html which is the one to be hidden and made visible with the code:


This is the layer you want to hide. <a href="javascript:void(0);" onMouseUp="hideLayer('layer1')">Hide again</a>



Thanks
Luke
glenngv
09-08-2004, 07:06 AM
parent.showLayer('layer1')

Iframe is not supported in NS4 but you have NS4 detection in your functions. And eval() is not necessary.

function showLayer(name){
window.frames[name].style.visibility = "visible";
}

If you really want to support NS4, you should use <ilayer> for NS4.

<iframe name="iframe2" src="iframe2.html" align="top" height="200" width="95" hspace="10" vspace="10" align="middle">
<ilayer name="iframe2_ns" src="iframe2.html"></ilayer>
</iframe>

And the code:

function showLayer(name){
if (document.layers) document.layers[name+'_ns'].visibility = "hide";
else window.frames[name].style.visibility = "visible";
}

and the call from iframe:

parent.showLayer('iframe2');

You can also integrate the showing/hiding of iframes or ilayer in a single function.
heyseuss
09-09-2004, 04:19 AM
Hey, that's a big help. I'm currently working on a Mac, and the JavaScript hide and unhide isn't working with Safari, Netscape or Firefox, however it is working with IE. Is there some special syntax I should include to cover these browsers?

I've got an online preview of the files at:

http://www.pipedreams.net.nz/css_tests/test.html

The code on the pages has become a little more convoluted than they were before, because I've introduced a transparency to the iframe/ilayer from the tutorial on this page:

http://www.htmlite.com/SD009b.php

The code in case it is helpful is this now:

Main parent page:




<html>

<head>

<SCRIPT language=javascript>
IE = (document.all) ? 1:0;
NN = (document.layers) ? 1:0;

function hideLayer(name){
if (NN) {
eval('document.'+name+'.visibility = "hidden"');
}
else if (IE){
eval('document.all.'+name+'.style.visibility = "hidden"');
}
}

function showLayer(name){
if (document.layers) document.layers[name+'_ns'].visibility = "hide";
else window.frames[name].style.visibility = "visible";
}



</SCRIPT>

</head>

<body marginwidth="0" marginheight="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">


<DIV ID="layer1" style="visibility:visible; position:absolute; top:1px; left:1px; width:'100%'; height:100%;" z-index="100">

<iframe name="iframe2" src="image.html" align="top" width="100%" height="100%" width="95" hspace="10" vspace="10" align="middle" allowtransparency="true" scrolling="no" frameborder=0>
<ilayer name="iframe2_ns" src="iframe2.html"></ilayer>
</iframe>

</DIV>

<p>

<iframe name="iframe1" frameborder=0 src="iframe1.html" align="top" height="100%" width="100%" hspace="10" vspace="10" align="middle">
<ilayer name="iframe1_ns" src="iframe1.html"></ilayer>
</iframe>


</body>

</html>



The layer to be hidden is this:




<html>

<head>

<style type="text/css">
.trans_div {
font-weight:bold;
margin:0px;
/* This is an IE filter command. Other browsers will ignore it */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='50percent.png');
}
/* Square bracketed class styles are usable non-IE type browsers */
.trans_div[class] {
background-image:url(50percent.png);
}
</style>
<!--[if IE]>
<style type="text/css">
body {height:100%;}
</style>
<![endif]-->
</head>
<body class="trans_div">

<table width=100% height=100%>
<tr>
<td align=center valign=center>

<img src=image.jpg>
<br>
<a href="javascript:void(0);" onMouseUp="parent.hideLayer('layer1')">Hide again</a>

</td>
</tr>
</table>

</body>
</html>


And the other iframe which is the controller is this:



<html>

<body background="image.jpg">

<table height=100%>
<tr>
<td valign=bottom>
<a href="image.html" target="iframe2" onMouseUp="parent.showLayer('layer1');">
Click me to show</a>
</td>
</tr>
</table>

</body>
</html>
glenngv
09-09-2004, 06:35 AM
quick fix:


function hideLayer(name){
if (document.getElementById) document.getElementById(name).style.visibility = "hidden";
else if (document.layers) document.layers[name].visibility = "hide";
}

function showLayer(name){
if (document.getElementById) document.getElementById(name).style.visibility = "visible";
else if (document.layers) document.layers[name].visibility = "show";
}