Find div in iframe (same domain), click event.

Dev Shed Forums Sponsor:

January 8th, 2013, 05:11 AM

wouz

Contributing User

Join Date: Jan 2004

Posts: 107

Time spent in forums: 19 h 51 m 14 sec
Reputation Power: 39

jQuery - Find div in iframe (same domain), click event.

I want to expand a div with an iframe in it, when i click on a button within the iframe.

This is what i tried, but didn't work.

Code:

<div id="block" style="width:420px;height:280px;">
<iframe id="myframe" src="http://samedomain.com/frame/" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>


<script>
$("#myframe").contents().find(".button-block").click(function(){
    $("#block").animate({height:'600', width:'900'})
});
</script>

This is the button inside the iframe I click on:

Code:

 
<div class="button-block">
                <button type="button" id="search-btn">Search</button>
</div>

__________________
woozy.

January 8th, 2013, 07:45 AM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

Target Parent Window from Iframe Using jQuery

January 9th, 2013, 05:18 PM

wouz

Contributing User

Join Date: Jan 2004

Posts: 107

Time spent in forums: 19 h 51 m 14 sec
Reputation Power: 39

what you are saying is targetting the parent frame from within the iframe code, it's another approach from what i tried in my first post - unfortunately this doesn't work either. Tried the following 3 variants.

Attempt #1:
Parent page:

Code:

<div id="block" style="width:420px;height:280px;"> <iframe id="myframe" src="http://samedomain.com/frame/" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div>

Iframe source page:

Code:

<div class="button-block">
<button type="button" id="search-btn">Search</button> </div>

<script>
$("#search-btn").click(function(){
    parent.top.$(“#block”).animate({height:'600', width:'900'})
});
</script>

Attempt #2 (only difference with #1 is im calling the div class around the button instead of the button ID)
Parent page:

Code:

<div id="block" style="width:420px;height:280px;"> <iframe id="myframe" src="http://samedomain.com/frame/" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div>

Iframe source page:

Code:

<div class="button-block">
<button type="button" id="search-btn">Search</button> </div>

<script>
$(".button-block").click(function(){
    parent.top.$(“#block”).animate({height:'600', width:'900'})
});
</script>

Attempt #3:
Parent page:

Code:

<div id="block" style="width:420px;height:280px;"> <iframe id="myframe" src="http://samedomain.com/frame/" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> </div>

Iframe source page:

Code:

<div class="button-block">
<button type="button" id="search-btn">Search</button> </div>

<script>
$("#search-btn").click(function(){
    $(“#block”, window.parent.document).animate({height:'600', width:'900'})
});
</script>

January 9th, 2013, 05:40 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

Try this:

Code:

<script>
$("#search-btn", top.document).click(function(){
    $(“#block”).animate({height:'600', width:'900'})
});
</script>

Or this:

Code:

<script>
$("#search-btn", parent.document.body).click(function(){
    $(“#block”).animate({height:'600', width:'900'})
});
</script>

I think, one of these should work.

January 9th, 2013, 05:52 PM

wouz

Contributing User

Join Date: Jan 2004

Posts: 107

Time spent in forums: 19 h 51 m 14 sec
Reputation Power: 39

Thanks for the suggestions but both these codes also failed to make it work.

Weird because i'm calling the jquery script from both pages (iframe page and parent page) so that's also not the problem.

I can't think of anything why it just doesn't work.

January 9th, 2013, 06:10 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

Are you getting any type of error, from your browser's console log?

You might could also try window.parent or parent.document.

Last edited by web_loone08 : January 9th, 2013 at 06:15 PM.

January 10th, 2013, 07:21 AM

wouz

Contributing User

Join Date: Jan 2004

Posts: 107

Time spent in forums: 19 h 51 m 14 sec
Reputation Power: 39

doesnt work with your additional suggestions.

I never used a console log. Will look into it. In the meantime any other suggestions are welcome.

January 10th, 2013, 09:02 AM

wouz

Contributing User

Join Date: Jan 2004

Posts: 107

Time spent in forums: 19 h 51 m 14 sec
Reputation Power: 39

maybe there's a server setting that needs to be changed?

January 10th, 2013, 12:34 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

I wouldn't think it would be a server issue, because this is a client side scripting. If anything..., it's a XSS issue (browser security); that's why I was asking if you seen any errors, in your console. You might want to search the jQuery Forum. I seen a few posting about this matter, on there. One of the post mentioned using bind(); to grant iframe child/parent access.

Additional Note: I did think of one issue, that maybe causing this; especially if your trying to get your code to work in IE. It is possible..., that this is a P3P issue. If it is..., you will need to use a P3P Header; at the top of your pages. I have had to do this before, but I was using an iframe page; from a different domain (on a page, from within my domain).

Last edited by web_loone08 : January 10th, 2013 at 01:18 PM.

#10

January 15th, 2013, 07:10 PM

wouz

Contributing User

Join Date: Jan 2004

Posts: 107

Time spent in forums: 19 h 51 m 14 sec
Reputation Power: 39

picked this up again, and i think you're on the right track with bind.
also thanks for suggesting the jquery forum, i found some interesting info about this.
Here's some good info on it: http://forum.jquery.com/topic/trigger-from-iframe-to-parent-window

I've also read in other threads that a custom events are best for this. I don't really know how to do this, since i've just learned about jquery, but will try some things.

About the IE thing, im using firefox so i dont think this is it.

#11

January 16th, 2013, 07:35 PM

wouz

Contributing User

Join Date: Jan 2004

Posts: 107

Time spent in forums: 19 h 51 m 14 sec
Reputation Power: 39

thanks for pointing me in the right direction! it works now. Read alot and this is what made it work.

Parent page:

Code:

<script>
$(document).bind('newExpandDiv', function(e) {
	$("#block").animate({height:'600', width:'900'})
});
</script>

Iframe page:

Code:

<script>
$("#search-btn").click(function(){ 
	parent.$(parent.document).trigger("newExpandDiv");
});
</script>

#12

January 16th, 2013, 09:37 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 599

Time spent in forums: 1 Week 1 Day 12 h 40 m
Reputation Power: 69

Cool, I am glad you got it working and hopefully this thread will help people, with this issue, in the future.

jQuery - Find div in iframe (same domain), click event.

Developer Shed Advertisers and Affiliates