include javascript files by xml file
Question
i have this code...
<script type="text/javascript">
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "Client-Controls/ClientGridView.xml", true);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var oHead = document.getElementsByTagName('HEAD').item(0);
var x = xmlDoc.getElementsByTagName("script");
for (i = 0; i < x.length; i++) {
var oScript = document.createElement("script");
oScript.language = "javascript";
oScript.type = "text/javascript";
oScript.src = x[i].childNodes[0].nodeValue;
oHead.appendChild(oScript);
}
</script>
this render some but i cant use that javascript file functions... What can do the trick??
2 answers
solution1
0 2013-02-07 17:08:31
Your scripts will be loaded asynchronously so you can't use them right away. Give them an onload handler so you know when they are ready:
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = x[i].childNodes[0].nodeValue;
oScript.onload = function () {
// run bar, which is contained in foo.js
bar();
};
oHead.appendChild(oScript);
If you want to make sure all your scripts have loaded, you can create a counter:
function counter(count, callback) {
return function() {
count -= 1;
if (count === 0) {
callback();
}
}
}
and pass it to each load handler:
var x = xmlDoc.getElementsByTagName("script"),
countdown = counter(x.length, function(){ alert("All scripts loaded!"; });
for (i = 0; i < x.length; i++) {
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = x[i].childNodes[0].nodeValue;
oScript.onload = countdown;
oHead.appendChild(oScript);
}
solution2
0 2018-02-19 04:41:08
Expanding on Dennis's point, add a variable in the Javascript file that you're trying to get and check if that variable exists or if it's an interger, check the value. Anyway, you can easily do this in Javascript. Here's two ways.
Option One
var neededScript = document.createElement("script"); n//if you want the script to be asynchronous, then set the async attribute like this: neededScript.async=""; //then point the [src] attribute to the required script. neededScript.src="src"; document.head.appendChild(neededScript);
script to the body , then instead of document.head.appendChild use document.body.appendChild .
You can append children to any element using either document.getElementById or document.getElementsByClassName or if you want to filter elements by tag name ( <html> is a tag) then use document.getElementByTagName or - my personal favourite coming from jQuery - document.querySelector .
You should read up on all of these methods as they are crucial to manipulating the DOM.
Second Option
Second option is using a very popular library called jQuery. It's syntax is a lot shorter than the document API syntax. It's main purpose is making DOM manipulation easier.
var requiredScriptSrc="src"; $("head").append("<script src='"+requiredScriptSrc+"'></script>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
selectors , you should be familiar with them if you've tried CSS or document.querySelector .
Option Three
Option three is to use
custom tags and a for loop that gets an attribute of the custom tag and creates a script element.
for(var i = 0; i<document.getElementsByTagName("js-module").length; i++){ var s = document.getElementsByTagName("js-module")[i].getAttribute("src"); var r = document.createElement("script"); r.src = s; document.head.appendChild(r); }
<js-module src="src"></js-module>
If you need any more help, drop a comment on this post.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.