PDA

View Full Version : 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:


<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:


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

monaya
02-19-2009, 03:15 PM
Now in the iframe, you may do:

<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
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
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:


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
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! :eek: 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.

monaya
02-19-2009, 11:43 PM
The script is perfect. i just thought I'd let you know I found this weird bug since I can tell you're keen about your code.

The close link in the iframe does not show up when the url in the address bar does not contain the www. eg. (http://website.com)

jscheuer1
02-20-2009, 05:47 AM
Hmm, well it depends upon how you load the page into the iframe, remember no cross domain scripting is allowed, so if the address of the iframe has www, then the address in the address bar must as well. But you can get around that by using the relative path for the address of the page in the iframe (the src attribute of the iframe or the href of a link that loads a page into the iframe, etc.), that way it should match the www or not www of the parent page.

But I'm not sure really if this is what you are talking about because there is no close link in the iframe in my demo, just a hide link.

monaya
03-11-2009, 04:23 PM
Is it possible to customize this so when the layer opens, everything else behind the layer gets greyed out or dark? I see this alot but I couldnt find a tutorial on this.

jscheuer1
03-11-2009, 04:31 PM
You might want something like:

http://particletree.com/features/lightbox-gone-wild/

or probably a better choice:

http://www.dolem.com/lytebox/

There is also Dynamic Drive's:

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm

which is pretty good as well.

In fact there are probably 100's of these type of scripts around.

monaya
03-11-2009, 05:42 PM
Thanks. I didn't know there was going to be so much code involved in graying out the background of a layer in focus :eek: I need to learn more.

The instructions for lytebox was easiest for me to follow but it has so much code because it also is like an image gallery as well.