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 (e.g. 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())