Entry
How can I add a reference to an external JS file using DOM methods ( like <script src="..">
Jun 25th, 2003 17:14
Stephan Wissel, Jean-Bernard Valentaten, Very good HTML and JavaScript page in german language: http://selfhtml.teamone.de/
So basicaly you want dynamically add external JavaScript-code in your
document. Well that is possible, exactly by placing it directly into
the document header while it is loading.
Look at this little exaqmple, that should solve your problem, but only
while the page is loading:
<head>
<script language="javascript" type="text/javascript">
<!--
//check Browser and Version
var nav = navigator.appName.indexOf("Netscape");
var vers = parseInt(navigator.appVersion);
/*
if we encounter a rare case of Netscape 4.x or lower,
we use netscape4.js, else we use goodBrowser.js
*/
if ((nav != -1) && (vers <= 4))
document.write("<scr" + "ipt language=\"JavaScr" +
+ "ipt\" type=\"text/javascr" +
+ "ipt\" src=\"../js/netscape4.js\"></scr" +
+ "ipt>");
else
document.write("<scr" + "ipt language=\"JavaScr" +
+ "ipt1.4\" type=\"text/javascr" +
+ "ipt\" src=\"../js/goodBrowser.js\"></scr" +
+ "ipt>");
//-->
</script>
</head>
<body ....>
...
...
...
</body>
Does work for me :)
HTH,
Jean
------------------------------------------------------------------
Thx Jean,
I was aware of the document.write. However as you pointed oout
correctly it only works on document load. I found some time to do R&D
and found this way for DOM compliant browsers:
the html file:
<html>
<head>
<title>Test for DOM</title>
<script type="text/javascript" language="JavaScript">
function putthisSource() {
var newJS = document.createElement("script");
newJS.setAttribute("type","text/javascript");
newJS.setAttribute("language","JavaScript");
newJS.setAttribute("src","pushme.js");
var headRef = document.getElementsByTagName("head").item(0);
headRef.appendChild(newJS);
alert('function called');
}
</script>
</head>
<body>
<form method="post" action=#">
<input type="button" value="test the dom" onclick="putthisSource()" />
<input type="button" value="Function there?" onclick="push2()" />
</body>
</html>
The pushme.js
function push2() {
alert("Push2 pressed!!!");
}
It will not work in NN4, so some prevention should be done (like test
for a DOM method). I tested it with Mozilla 1.2 and IE6. The nice
thing: I works dynamicaly. After loading the page you can press the
second button and u will get an JS Error (Lib not loaded). If you then
press the first one the lib is loaded and subsequentially clicking the
second will work :-)
HTH
:-) stw
