Close layer in parent from iframe?

**monaya** · 02-18-2009, 08:36 PM

I'm using the code below in the parent window to toggle a layer in the parent window that displays an inline iframe within the <div> tags. However, I would like to provide a link to close this div tag from within the iframe as well.

in parent window:
<script type="text/javascript">
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>

toggling on parent window with:
<a href="javascript:;" onClick="javascript:toggleLayer('div1')">email</a>

This code doesn't do anything when placed in the iframe as well.

**jscheuer1** · 02-19-2009, 07:16 AM

First off, due to odd but essentially valid behavior in some browsers, your link on the parent should actually be:

Code:

<a href="javascript:showHide();" onclick="toggleLayer('div1');return false;">email</a>

The showHide bit can be anything you like, but since it will show up in the status bar in many browsers, it should be indicative of what the link does.

Now in the iframe, you may do:

Code:

<a href="javascript:showHide();" onclick="parent.toggleLayer('div1');return false;">email</a>

**monaya** · 02-19-2009, 03:15 PM

Originally Posted by jscheuer1

Now in the iframe, you may do:

Code:

<a href="javascript:showHide();" onclick="parent.toggleLayer('div1');return false;">email</a>

Hmm that doesnt seem to work in the iframe. It redirects to a page cannot be found in the iframe to something like this in the URL:
http://www.blah.com/java_script:showHide();

**jscheuer1** · 02-19-2009, 03:55 PM

I may have made a typo or mental error in what I recommended. But if I did, I don't see it right at the moment. On the other hand, you may have implemented it incorrectly. For example, the result you are describing sounds as though there is no toggleLayer() function on the parent page. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**monaya** · 02-19-2009, 04:20 PM

Originally Posted by monaya

Hmm that doesnt seem to work in the iframe. It redirects to a page cannot be found in the iframe to something like this in the URL:
http://www.blah.com/java_script:showHide();

I made the mistake of not removing the underscrore in the word javascript that came in my email, but the close link in the iframe is still not working. here is all the relevant code in the 2 pages:

Page 1:

after <head> tag:

<script type="text/javascript">
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>

after body tag:
(works)

<a href="javascript:showHide();" onclick="toggleLayer('div_emailthis');return false;">email</a>
<div id="div_emailthis"><iframe src="email.cfm" width="450px" height="320px" marginwidth="0" marginheight="0" frameborder="no" scrolling="no" style="border-width:2px; border-color:#333; background:#FFFFFF; border-style:solid;" id="frm_emailthis"></iframe></div>

Page 2 (iframe) email.cfm

after <head> tag:

<script type="text/javascript">
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>

after <body> tag:

<a href="javascript:showHide();" onclick="parent.toggleLayer('div_emailthis');return false;">close</a>
(doesn't work)

The link toggles the layer on page 1, but does not close the div when placed within the iframe.

**jscheuer1** · 02-19-2009, 05:23 PM

Works here. I copied your code with no modification. You don't need the toggleLayer script on the page in the iframe, but it doesn't really hurt. To avoid an error when the page in the iframe is displayed by itself though, I'd remove the toggleLayer script and use document.write or the DOM to create the close link in the iframe page if and only if the parent page has the toggleLayer script on it.

But let's not get ahead of ourselves just yet. Here is a working demo:

http://home.comcast.net/~jscheuer1/side/tog_h/

Now, your pages must both be on the same domain, but from what you've shown, they are. However, you may have oversimplified, or even if they are on the same domain, due to something you and/or the server is doing, they may appear to be on different domains.

There is no cross page scripting across domains with javascript. Not that it isn't theoretically possible (in fact it used to be fine), just that modern browsers consider it a security violation, so don't allow it.

**monaya** · 02-19-2009, 05:41 PM

Originally Posted by jscheuer1

But let's not get ahead of ourselves just yet. Here is a working demo:

http://home.comcast.net/~jscheuer1/side/tog_h/

WOw. Thank you.

Ok this is weird. You're copy was exactly like what I had going. I just copied and pasted yours back into mine and now it works. Did you make any changes to the <script> block?

**monaya** · 02-19-2009, 05:46 PM

The same page loading in the iframe, I'm getting to load as a new window on another page. Is it possible to get the close layer link in the iframe to also close the window if its in a new window?

I figure it's not possible so for now, I just provided 2 separate links in the iframe: one to close the layer and one to close the window.

<a href="javascript:showHide();" onclick="parent.toggleLayer('div_emailthis');return false;">close layer</a> | <a href="javascript:window.close();">close window</a>

**jscheuer1** · 02-19-2009, 07:19 PM

Not too hard, and it gives me an opportunity to incorporate the idea I had before about avoiding an error if the page is opened by itself*. See the updated demo (same place as before):

http://home.comcast.net/~jscheuer1/side/tog_h/

Make sure to reload the page and/or clear your cache if you don't see two links on the top page now.

Let me know if you need any help getting the code.

*As an added bonus, if you open the email page by itself there is no close or hide link. If I link to it from here though, because all off site links are opened in new tabs or windows from the forum, it will show the close link. You can copy and paste the email page's address:

Code:

http://home.comcast.net/~jscheuer1/side/tog_h/email.htm

into the browser's address bar though to see that there is no close or hide link when the page is opened as a normal page.

**monaya** · 02-19-2009, 07:31 PM

Originally Posted by jscheuer1

Not too hard, and it gives me an opportunity to incorporate the idea I had before about avoiding an error if the page is opened by itself*. See the updated demo (same place as before):

http://home.comcast.net/~jscheuer1/side/tog_h/

holy mackerel!

I didn't think that was possible. It worked on my end.
You actually think about your code! I love it. Most code still leaves so many holes.