Search code examples
javascripthtmlcssiframeframes

Hide iframe or div from other iframe in a frame

I am trying to show or hide a div containing a iframe from another iframe which contains a frameset.

So if you are looking in the code; I am trying to show or hide div "dd" with a function within shades.html. Shades.html is part of a frameset in index2.html which is shown in iframe "UBERFRAME" in index.html.

Some code:
Index.html:

<HTML>
<BODY>
    <div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
        <iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
    </div>
    <div id="dd" name="dd" style="position:absolute;top:20px;left:20px;z-index:998;">
        <iframe id = "overlayframe" name = "OVERLAY" src="dd.png" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:480px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
    </div>
</BODY>

index2.html:

<HTML>
<FRAMESET ROWS="51,376,53,*" FRAMEBORDER="0" FRAMESPACING="0">
    <FRAMESET COLS="70,335,324,71,*" FRAMEBORDER="0" FRAMESPACING="0">
        <FRAME SRC="HEADER/home.html" NAME="homeheader" NORESIZE SCROLLING="no">
        <FRAME SRC="HEADER/name.html" NAME="nameheader" NORESIZE SCROLLING="no">
        <FRAME SRC="HEADER/datetime.html" NAME="datetimeheader" NORESIZE SCROLLING="no">
        <FRAME SRC="HEADER/help.html" NAME="helpheader" NORESIZE SCROLLING="no">
    </FRAMESET>

    <FRAME SRC="mainempty.html" NAME="mainframe2" NORESIZE SCROLLING="no" BORDER="0">

    <FRAMESET COLS="69,142,70,316,100,103,*" FRAMEBORDER="0" FRAMESPACING="0">
        <FRAME SRC="FOOTER/so.html" NAME="so" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/shades.html" NAME="shades" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/sendsource.html" NAME="sendsource" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/volume.html" NAME="volume" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/micmute.html" NAME="micmute" NORESIZE SCROLLING="no">
        <FRAME SRC="FOOTER/outmute.html" NAME="outmute" NORESIZE SCROLLING="no">
    </FRAMESET>
</FRAMESET>

shades.html:

<HTML>
<HEAD>
    <script type="text/javascript">
        function showdd() {
            window.frames['overlayframe'].style.display = "none";
        }
    </script>
</HEAD>
<BODY>
    <a href="#" onclick="showdd(); return false;" >
      <img src="foo.png">
    </a>
</BODY>
</HTML>

Or plunkr demo: Click

Solution

  • A mate helped me fix the problem:

    Index.html:

    <HTML>
<HEAD>
  <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    function showDuck(){
      $('#dd').show();
      $('#overlayframe').show;
    }

    function hideDuck(){
      $('#dd').hide();
    }

  </script>
</HEAD>
    <BODY>
        <div style="display:block;position:absolute;top:20px;left:20px;z-index:997;">
            <iframe name="UBERFRAME" src="index2.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800; height:480; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
        </div>
        <div id="dd" name="dd" style="display:none;position:absolute;top:20px;left:20px;z-index:998;">
            <iframe id="overlayframe" name="OVERLAY" src="testframe.html" frameborder="0" allowtransparency="yes" scrolling="no" style="width:800px; height:428px; position:relative; left:0px;top:0px;margin:0;padding:0;" ></iframe>
        </div>

    </BODY>
</HTML>

    index2 unharmed

    shades.html:

    <HTML>

<BODY>

     <a href="#" onclick="javascript:window.parent.parent.showDuck(); return false;">
         show Donald Duck
     </a>

</BODY>

</HTML>

    testframe.html:

    <HTML>
  <BODY>
    <IMG SRC="http://img3.wikia.nocookie.net/__cb20130203061323/disney/images/6/6b/Donald_Duck_transparent.png" onclick="javascript:window.parent.hideDuck(); return false;">
  </BODY>
</HTML>

    Or http://plnkr.co/edit/x13V7l0qwv0jtI8IKXtf?p=info