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

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
}

Rating: 4 out of 5 based on 3 ratings

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

• Jul 14th, 2012 html - How to load javascript from parent into child context Saturday AM 11:50:59


• Jul 26th, 2012 jquery hide div if youtube embed src is empty Thursday PM 16:38:33


• Jul 22nd, 2012 javascript - Callback recall itself Sunday PM 13:56:27


• Jul 13th, 2012 ruby on rails - How do import a Javascript file into a Haml view? Friday AM 07:58:27


• Jul 22nd, 2012 Adding html/any tags to either side of selection - Javascript Sunday AM 03:57:12


• Jul 08th, 2012 grouping - jQuery wrap every X elements in div Sunday PM 12:32:47


• Jul 30th, 2012 html5 - Is it possible to use the File JavaScript api to load a server side file? Monday AM 05:46:47


• Jul 31st, 2012 html5 - Is it possible to use the File JavaScript api to load a server side file? Tuesday AM 05:46:21


• Jul 24th, 2012 PHP / HTML uploading script not working right Tuesday AM 03:54:49


• Jul 19th, 2012 Implementing CSS variables in HTML page Thursday AM 08:45:51

The post html – How to insert a javascript file into an iframe then call a function in the inserted javascript? appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/html-how-to-insert-a-javascript-file-into-an-iframe-then-call-a-function-in-the-inserted-javascript.html