I'm trying to dynamically add a SCRIPT object to my document using the DOM.
For example:
Code:
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', '../some_script.js');
//need to check for valid object here prior to appending
html_doc.appendChild(js);
I'm looking for a property or method to test this object to make sure it exists before appending it to document.head
I've glanced over the SCRIPT methods and I didn't see anything that really made it obvious that it could be used. I thought perhaps js.length or js.hasChildNodes might work, but of course it doesn't.
Alrighty, so I thought I would try another approach to check and see if a script object was successfully loaded.
My thought was that I could check for a function/variable/etc that was in the script I wanted to include, and see if that exists. so i crafted the following:
Code:
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', script_filename);
html_doc.insertBefore(js,html_doc.firstChild);
alert(someVar);
My thought being that the JS engine would load the "parent" script, see that it needed to load a script element into the DOM, load it into the DOM ,then automatically parse the file script_filename before continuing. My testing indicated that this is not the case.
When I look at the DOM via moz's DOM inspector, it indeed shows the script object in the correct place, but alerting someVar returns an 'undefined' even though it is defined correctly in the script.
hmmm. I think my guess on how the JS engine functions is incorrect. Any ideas?
The problem is that, till the function ends, the DOM created elements are still "virtual". The appending operation is made only when the function ends, so that if you call a variable set in the new created script element from inside the same function which creates/appends the new element, that variable is not yet defined, as the function is not ended.
One solution to solve the problem is to call from inside that external js file a function which is already set in the "parent" js code, and to pass there that variable:
PHP Code:
<script type="text/javascript">
function alertV(param){
alert(param)
}
onload=function(){
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src','s.js');
html_doc.insertBefore(js,html_doc.firstChild);
}
</script>
Kor,
You've definitely got me on the right track. From my testing, i don't think the included script objects become instantiated until after the current script object has been executed, not just the function that calls to insert the new files.
I tried checking one of the var's in the new object while (1)still in the function that inserted it, (2) jsut after the function, (3) in the next script object.
The only time it returned true was in the next script object.
Hmm. now if I can only figure out how to stop and in script blocks in a .js file
Sorry, what I meant to say was "if only i could figure out how to stop and end script blocks in an external .js file".
In other words, this whole exercise is because I want to be able to include a single .js file, and get access to a whole slew of functions (because in that single script I'll dynamically append N number of javascript files. In my calling HTML file, I'll know where the parent JS is, so i can say something like:
However, if my child scripts are in another folder say: ../../../../../my/silly/folder, I'll never know where to look to append them. What I want to do is try to include (or even just check for the existence of) ../my/silly/folder, if it exists I'll go about my way, i not, I'll loop and look for ../../my/silly/folder, and so on going bakc until I have located my includes.
So really there may be methods I've overlooked.
Is there a way to return the location of the .js file (not location.href, but the actual .js file)
Is it possible (client side) to check for the existence of a file/page on a website?
Actually, the libraries I'm trying to load are my AJAX abstraction libraries. Kind of a chicken and egg issue. It's not really that big of a deal to fix, I just didn't want to have to set a hoststring variable before I make a call to that file. Just being lazy, and looking for a more elegant way of doing things. Thanks for the help though.
hostname or IP doesn't make a difference, the paths are different too. My application root is '/james/scripts/my_Script.js', and in this example yours would be '/kor/kor_rox/superscripts/scripts.js' (nested one level deeper than mine).
I had a thought based on something you said though. If I have a script object, do you know how to refer to that from inside itself (without using getElementById)? I thought I could just use 'this', but apparently not. If i can self-reference the script object, then I can parse the src property, and find out the absolute path (since i know that my_script.js, will always be in ~/scripts/my_script.js, and everything else will be relative from there.
Kor,
You've been a big help. This is how I ended up solving my particular problem:
PHP Code:
var jscripts = document.getElementsByTagName('script');
var absolute_path;
for(i=0;i<jscripts.length;i++){
var src_string=jscripts[i].src;
if(src_string.match('simple_ajax_framework')){
//remove from string to get the base url
absolute_path = src_string.replace(/ajax\/simple_ajax_framework.js/,'');
}
}
function include_dom(script_filename,iteration) {
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', script_filename);
html_doc.insertBefore(js,html_doc.firstChild);
}
My only concern at this point is whether my reference to the tagname array is as efficient as possible. Would document.document.Element.getElementsByTagName() be more efficient?
Would document.document.Element.getElementsByTagName() be more efficient?
wrong syntax, see the red:
document.documentElement.getElementsByTagName()
Well... document.documentElement represents the entire HTML tag (not only the "visible" BODY, so that it looks safer to me to use this precise reference (in case you want to find an object which might belong to the HEAD, for instance). I agree that it looks like the simplier reference document.object is able to do the same, but... well...
Reply With Quote
Still no luck, am I misunderstanding something?
it makes me sad.
Originally Posted by jholder
Bookmarks