Call a jquery function to the parent page from iframe with regular javascript

Question

I created an iframe with regular javascript. In that iframe is the Jquery function along with JQuery. The code works in the iframe as one would expect. I want to have the parent page do the function and not within the iframe. The iFrame and all content is loaded from the same domain, although the code that creates the iframe can be ran on any site. For example, if siteB, siteA ran the code, siteA & B can create the iframe to siteZ's website content.

Here's the code so far from the iframe that I want to run in the parent page:

<script>
$(document).ready(function(){                       
    $().intad({
        title: "blahblah",
        url: "http://www.blah.com",
        timeout: 30,
        deplay: 2,
        wait: 3,
        closeable: true
    });
});
</script>

I tried this from the iframe:

<script>
$(document).ready(function(){                       
    function intad(){
        title: "blahblah",
        url: "http://www.blah.com",
        timeout: 30,
        deplay: 2,
        wait: 3,
        closeable: true
    });
});
</script>

And this from the code that is loaded into the parent page:

<script>
parent.document.getElementById("RandomIdHere").contentWindow.intads();
</script>

sic1 · Accepted Answer · 2012-05-03 18:37:19Z

1

In the iFrame, you need to put the function you wish to call on the window object so it is globally accessible.

Once it is there, from your main, top level html page, you can do iFrameDomElement.contentWindow.yourFunctionToCall().

EDIT:

So, to break it down further, you have many issues happening with your code. First off, what is intad? Is it a method on the jquery prototype? If not, you are doing something wrong. Here is fundamentally what you need to do.

in your main page, that i will call parent.html from now on.

You need something like this:

// this is a shorthand document ready function
$(function() {

    // we will call this from the iframe
    window.functionInParent = function() {
        // do your work here
    };

    var iframe = document.createElement('iframe');
    iframe.src = 'link/to/iframe/source';

    // if you want to talk to the iframe from this parent page,
    // use this to access the iframe's window object.
    // just make sure that the function you try to call is on the
    // window object of the iframe, just like we did with the function above.
    var iframeWindow = iframe.contentWindow;
});

In your iframe, you need something like this:

$(function() {
    // your iframe's dom is ready - do stuff here

    // once you are ready, call the parent function
    top.functionInParent();
});

I hope this helps. If you need further help, put your working (or almost working) code into a jsfiddle so i can look at it in a better way.

edited May 3, 2012 at 18:37

answered May 3, 2012 at 17:56

sic1

4863 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

sic1 Over a year ago

If you need to call from the iframe to your top level page, within the iframe you can use the top global variable to get access to the main page's window object.

Patriotec Over a year ago

How do I do that exactly from the iframe. You please show me the working code?

sic1 Over a year ago

Check the update, this is how to talk from your iframe to your parent page.

Patriotec Over a year ago

i see the prob, after I got back into the office. I dont have Jquery on the parent page. I have JQuery in the frame thats generated by regular javascript. I need to call the JQuery function from the iframe to the parent page using regular javascript. Is this even possible or do I have to include JQuery in the parent page, which I'm trying to avoid.

sic1 Over a year ago

Well, maybe im missing something. You need jQuery on whatever frame you are doing the dom manipulation on. Then talk to the pages as i have indicated in my examples. If you need to do jQuery manipulation on both the parent and the iframe...well, then i think you just need to include it on both. I mean, you could look at using the jquery object of page its on in the other pages context - but that sounds really messy and not really worth your time.

|

Collectives™ on Stack Overflow

Call a jquery function to the parent page from iframe with regular javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related