Entry
How to dynamically load and execute a .js file
May 15th, 2002 07:01
Neil wheeler-Jones, Gareth Hay, Martin Honnen, Robert Taylor,
Can anyone confirm that any of the below methods work for IE6 or at
least 5.5+.
I am using
document.body.insertAdjacentHTML('afterBegin','<SCRIPT DEFER
SRC="'+makeQstr[0]+'"></script><\/SCRIPT>');
where makeQstr[0] contains my querystring. It should be adding an update
() function to the page, but it doesn't.
--
--
--
It seems that NN4 can do this in the following way: set
window.location.href = 'jsfile.js';
Then the js file is loaded and executed in the context of the already
loaded html page while the html page remains loaded in the window.
So a complete example looks like
<HTML>
<HEAD>
<TITLE>
Kibology
</title>
</head>
<BODY>
<A HREF="javascript: void 0"
ONCLICK="location.href = 'test.js';
return false;"
>
load
</a>
</body>
</html>
with test.js having the following content:
alert(document.title);
Unfortunately this solution doesn't work with NN6 nor IE4+ nor Opera as
they all attempt to replace the html document with the .js file.
IE4+ however allows the following to dynamically load and execute a js
file: insert a
<SCRIPT DEFER SRC="test.js"></script>
tag with DOM methods into the document, e.g.
document.body.insertAdjacentHTML('beforeEnd',
'<SCRIPT DEFER SRC="test.js"></script><\/SCRIPT>');
The DEFER is important here as otherwise it doesn't work.
As for NN6, the bugs preventing an inserted script element to load its
code and execute have been fixed see
http://bugzilla.mozilla.org/show_bug.cgi?id=18843
so you are now able to add script elements to dynamically load a .js
file. I have tested the following code to work with NN6.2 but it might
well be that NN6.1 works too, maybe someone can check and the update
this entry.
Here is a complete test page that loads a script file with NN4, IE5+ and
NN6.2+:
<html>
<head>
<title>
script loading
</title>
<script type="text/javascript">
function loadScript (url) {
if (document.layers)
window.location.href = url;
else if (document.getElementById) {
var script = document.createElement('script');
script.defer = true;
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
}
</script>
</head>
<body>
<form name="gui">
<input type="button" value="load script"
onclick="loadScript('whatever.js')"
/>
<input type="button" value="call f"
onclick="f();"
/>
</form>
<p>
Kibology
</p>
</body>
</html>
Here is an example .js file whatever.js:
alert('Kibology');
if (document.layers) {
var l = new Layer(window.innerWidth);
l.left = 10;
l.top = document.height;
l.document.open();
l.document.write('Kibology for all. <br\/>');
l.document.close();
l.visibility = 'show';
document.height = l.top + l.document.height;
}
else if (document.getElementById) {
document.body.appendChild(document.createTextNode('Kibology for
all.'));
document.body.appendChild(document.createElement('br'));
}
function f () {
alert(new Date());
}
//---
//---
//--- THATS A BIT LONG.. try this for a solution when using IE4>
//---
In the page that you want to add a script js file to try this
Have in your Head tags
<HTML>
<HEAD>
<SCRIPT id="dynscript">
//-- find the file that you want to load
//-- using whatever technique, in the above q he gets it from
//-- makeQstr[0]. So assuming that holds the src location we do
document.all.dynscript.src = makeQstr[0];
//-- At the above point the src is loaded, so you dont have to
//-- wait for the document to finish loading etc
</SCRIPT>
<BODY>
....
</BODY>
</HTML>
Clever hey. Also use document.all not getElementbyId because the
document hasnt finished loading yet so getelementById wont work. You
could do the above on the onload event and call a function to do it.
By using the above method it is also possible to access a script tag
(that has an id) from other frame documents and copy the src to a
script tag in another frame document.. if you can find a useful reason
for doing so.
Hope thats usefull to someone. :-)
(any questions email nwj_uk@hotmail.com )
