Topic awaiting preservation: Importing js scripts

I'm wondering if it's possible to dynamically import javascripts. I saw Doc's CSS theme example that changes the href property of the LINK tag to load a different CSS file, and I said to myself it'd be cool if I could do that with the src property of the SCRIPT tag (plus it would be a handy function for this web app I'm developing). I tried it out and it didn't seem to work
But, being ever the optimist, I'm hoping there may be a way to do this. Any thoughts?

You have two choices

First is you can dynamically write script tags

something like

if (ie) {
document.writel("<scr" + "ipt src=\"ie_js.js\">");
// You have to break up the script tag or things will break
}

oh found it check out this thread



.:[ Never resist a perfect moment ]:.

Thanks bit. I actually tried the DOM approach you suggested in the thread, but it did not appear to work. The only differences were I used getElementById to get a reference to the script element and then called removeNode(true), and my script element was a child of the body element, instead of the head element. Should that matter though?

Added the code:

<script id="targetScript" src=""></script>

...

function doSomething() {

      var oldScript = document.getElementById("targetScript");

      var newScript = document.createElement("SCRIPT");

      

      if (oldScript) oldScript.removeNode(true);



      if (newScript) {

         newScript.id  = "targetScript";

         newScript.src = "myscript.js";



         document.body.appendChild(newScript);

      } else {

         // Bad news

      }

}

[This message has been edited by meccaman (edited 08-24-2002).]

I can't really take credit for that script I got it from bratta at dhtmlcentral. Follow the link and he has a whole tute on how to pull it off



.:[ Never resist a perfect moment ]:.

After messing with it for a while I got it partially working.
Basically, I loaded a new js script, however it would not take right away. I would set the src property, and then call a function in the new script all within the same function scope. This would generate an 'Object doesn't exist' error however if I performed the operation again it would work. I actually experienced this behavior before I posted but dismissed it as me not paying attention to what I was doing bc I was working on 5 different things at the time. Anyway, thanks for pointing me in the right direction, I have a feeling I know why it's behaving that way I just have to test my theory out. I'll let you know how it goes...



[This message has been edited by meccaman (edited 08-26-2002).]

I believe that as long as you know the number of the stylesheet, counting from zero at the top, you could just use...

document.styleSheets[x].href = '/my/other/stylesheet.css';

I had problems changing background images with this on Mozilla 1.x, but I think that is no more. I used a kludge to get around it here, at http://www.znippets.com/template/ - You can check it out there if you want. I just did a lot of this for last months client, here's an example - http://mk.labs.tk/ (Follow the link for "Inställningar", you can adjust font sizes and colors there.)

Your pal, -doc-