Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Send a JavaScript command from one iframe its parent?

    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:

    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:


    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:


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


    Thanks
    Luke

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    parent.showLayer('layer1')

    Iframe is not supported in NS4 but you have NS4 detection in your functions. And eval() is not necessary.
    Code:
    function showLayer(name){
       window.frames[name].style.visibility = "visible";
    }
    If you really want to support NS4, you should use <ilayer> for NS4.
    Code:
    <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:
    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:
    Code:
    parent.showLayer('iframe2');
    You can also integrate the showing/hiding of iframes or ilayer in a single function.

  • #3
    New to the CF scene
    Join Date
    Sep 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:




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




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



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

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    quick fix:
    Code:
    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";  
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •