call a function in parent document from a link in iframe

Bookmark on del.icio.us

call a function in parent document from a link in iframe

I have an iframe (yeah yeah, don’t use an iframe…I know). I want to call a function that’s written in the parent of the iframe when a user clicks a link inside the iframe. the age within the iframe is on my domain, so if that was a foreseen problem it’s nothing to worry about. I’m just not even sure what to look for on google. Any ideas?

———————————————————————

I don’t think iframe will work?! I have no idea on that.
Also how can you call a function?! you may call a page(containing that function) at most, that too by using frames.

———————————————————————

If he is talking about javascript, then you could call a function via onclick… if it’s PHP, you could initiate the function bby a GET trigger…

At the iFrame link you could set ‘?dofunction=true’ and at the main page, if ?dofunction is set and if ?dofunction equals true, then the function would be initiated.

I think there is a way to target something outside of the iFrame… I’m not sure though…

———————————————————————

sorry, my bad…I’m talking about javascript with jquery.

In order to call the page containing the iframe – when clicking a link inside the iframe – you use

Code:
window.parent

I have a function called “contentLoad” inside my parent document.

Code:
function contentLoad()
{
$(document).ready(function()
{
$(“#contentWrap”).slideToggle(“slow”);
setTimeout(function()
{
$(“#contentWrap”).slideToggle(1200);
}, 1500);
});
}
  2. function contentLoad()
  3. {
  4. $(document).ready(function()
  5. {
  6. $(“#contentWrap”).slideToggle(“slow”);
  7. setTimeout(function()
  8. {
  9. $(“#contentWrap”).slideToggle(1200);
  10. }, 1500);
  11. });
  12. }

“#contentwrap” is a div that wraps around the iframe.

I want “contentLoad()” to run whenever a user clicks on a link within the iframe.

I added a piece of code inside the iframe page that looks like this:

Code:
$(document).ready(function()
{
$(“a”).click(function(event)
{
window.parent.contentLoad();
});
});
  1. $(document).ready(function()
  2. {
  3. $(“a”).click(function(event)
  4. {
  5. window.parent.contentLoad();
  6. });
  7. });


This isn’t working. Any ideas why?

——————————————————————————–

okay, screw all of that. Changed my mind on the approach to make it easier.

New code in the iframe:

Code:
$(“a”).click(function()
{
window.parent.$(“#contentWrap”).toggle(‘normal’);
setTimeout(function()
{
$(“#contentWrap”).slideToggle(1200);
}, 500);
});
  1. $(“a”).click(function()
  2. {
  3. window.parent.$(“#contentWrap”).toggle(‘normal’);
  4. setTimeout(function()
  5. {
  6. $(“#contentWrap”).slideToggle(1200);
  7. }, 500);
  8. });

In the parent window of the iframe there is a div with the id “contentWrap”

I want this div to shrink to nothing, wait half a second, and then grow back to its original size.
I want this “toggle” to take place whenever a user clicks on a link within my iframe. Why isn’t this working?

——————————————————————

The <iframe> tag does not support any event attributes.
http://www.w3schools.com/TAGS/tag_iframe.asp

also window.parent can be called only with frames not iframes.

You should think of using frames instead!

2009
11/11
CATEGORY
iframe
TAGS



Write comment

  1. No comments yet.

  1. No trackbacks yet.