How to insert a javascript file into an iframe then call a function in the inserted javascript?

Question

Edit: Just found out this is a chrome problem, the code works fine in firefox

I have an iframe on a webpage that shows a book formatted as html. I would like to insert some javascript within this iframe to make the book more dynamic (eg click on sentences, show animations etc). The iframe content is in the same domain as the parent page.

I can insert the javascript into the iframe but get an error calling a function in the inserted javascript. I've described the different bits of code below:

My parent page javascript is:

function iframeLoaded()
{
    var iFrameID = document.getElementById('preview-iframe');

    var jsLink = iFrameID.contentDocument.createElement("script");
    jsLink.src="/tests/iframeAPI.js";
    jsLink.type = 'text/javascript';
    iFrameID.contentDocument.head.appendChild(jsLink); 
    iFrameID.contentWindow.initialiseApi()
}

and the html containing the iframe is:

<iframe id="preview-iframe" width="640" height="240" frameborder="0" src="./testpage.htm" onload="iframeLoaded()" scrolling="no"></iframe>

The contents of iframeAPI.js is:

window.initialiseApi = function() { alert("Hello world") }

Looking at the iFrame's html in the browser shows that the iFrameAPI.js tag is inserted ok into the iframe head, but I don't get the alert popup when the page is loaded. The error appears on the following line:

    iFrameID.contentWindow.initialiseApi()
    Uncaught TypeError: Object [object Window] has no method 'initialiseApi' 

However I can run this line in the browser's javascript console and the alert popup works fine.

Any help would be much appreciated.

Thanks,

Brian

---

Edit: I've just tried with an onload event to make sure the page is loaded and I still have the problem:

My parent page javascript is now :

function iframeLoaded()
{
    var iFrameID = document.getElementById('preview-iframe');

    var jsLink = iFrameID.contentDocument.createElement("script");
    jsLink.src="/tests/iframeAPI.js";
    jsLink.type = 'text/javascript';
    iFrameID.contentDocument.head.appendChild(jsLink); 
    jsLink.onLoad= iFrameLoaded();
}

function iFrameLoaded()
{
    alert("Iframe loaded"); // Alert works ok 
    var iFrameID = document.getElementById('preview-iframe');
    iFrameID.contentWindow.initialiseApi(); // Same error message on this line
}

Answer 1

It sounds like you are trying to use the function before the content has loaded.

try this instead:

var t = setTimeout(iFrameID.contentWindow.initialiseApi(),500);

This will wait half a second before trying the function which should give the page tiem to load. Delay times are given in milliseconds.

An even better approach is to try using Jquery and its ready() method but this requires the jquery library to be loaded as well. Its well worth it though in my opinion, see http://api.jquery.com/ready/ .

You would try something like:

$("body",iFrameID.contentWindow.document).ready(iFrameID.contentWindow.initialiseApi())

Answer 2

You're executing it right away without giving the script a chance to load. Hook up an onload event to your script block and run your main function then.

Answer 3

Try, in the page included in the iFrame, accessing the main page by doing something like:

window.parent.xyz = something;

Where something is what you want exposed to the main page. Could be a function or an object of functions. Now in the main page you can just do:

something(); // or something.somefunction();

You could also send window references, I think, but I have not tried that.

Answer 4

The easiest way is to call the initialiseApi function in the iframeAPI.js itself as it will be called as soon as it's loaded. The iframeAPI.js could look like that:

function initialiseApi() { 
    alert("Hello world"); 
}
initialiseApi();

There is no callback or timeout needed.