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>

Answer 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.