[RESOLVED]show/hide div within iframes?

I have a page with 2 iframes (iframe1 and iframe2). I have 2 links in iframe1 which one clicked should show one div and hide another in iframe2. 

How do I do it in JQuery? 


This is going to be quite tricky as <iframe> elements can function like sandboxes in the fact that they have little to no access about any of the other elements around them. So in order to use jQuery within an <iframe>, you’ll likely need to have jQuery
included within the page that is loaded in the <iframe> and capturing events from one to occur in the other can be difficult as well.

Do you have any example of the code that you are currently using? It might help to get a bit more perspective on your scenario or we might be able to recommend an approach that is a bit easier to implement.

In the left iframe (iframe1) I have a menu. On the right side is a content iframe (iframe2). I am loading data in this iframe2 and I have JavaScript objects holding some data. In the menu I have links that when clicked show specific data. Rather than reloading
the page again and making a round trip to the server I have my data in Div tags in iframe2 and I just need to show/hide based on what is clicked.

JQuery is loaded in all iframes.


Is there any reason that you are using <iframes> to handle displaying your specific content? Since you are already using jQuery, why not just load the contents of each of your iframes into <div> elements, that way everything is in the same DOM and events
from one can affect another :

<!-- Example of "iframes" -->
<div id='iframe1'></div>
<div id='iframe2'></div>

<!-- Wire up your events -->
<script type='text/javascript'>
   // When your page loads, populate your div / iframe elements

        // Wire up your event with your appropriate logic
        $('#iframe1 a').on('click',function(){
            // Do something when a link in your first <iframe> element is clicked

Leave a Reply