CODEWITHSUNDEEP
javascripthtmlcssiframeframes
Wouter
Wouter

Reputation: 11

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

Upvotes: 0

Views: 2652

Answers (2)

Wouter
Wouter

Reputation: 11

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

Upvotes: 1

CodeToad
CodeToad

Reputation: 4724

Are all three pages (parent documents and the two iframes) from the same domain and subdomain?

If not, your only real option is to use window.postmessage

And even if they are from same domain, post message is good approach compared to directly accessing the DOM of another page.

Either way, with or without postmessage, You will need a reference to the window object of the iframe that you wish to target.

One approach is to have frame A inform the parent page (via raising event or calling a function in the parent page js), and then have the parent page inform frame B.

If you supply a example page I can create a working example for you.

EDIT: below code sample from the solution to the example that you provided. notice how the frame is calling a function parent document. parent document then manipulates DOM of the other iframe.

plunkr

in frame A:

 $('#show').click(window.parent.showDuck);
  $('#hide').click(window.parent.hideDuck);

in parent document:

 function showDuck(){

  $('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'visible');
      }

    function hideDuck(){
  $('#overlayframe')[0].contentWindow.document.getElementById('duck').style.setProperty('visibility', 'hidden');

}

Upvotes: 1

Related Questions