如何dynamic加载JavaScript文件?
我有这个代码:
<script type="text/javascript"> function js() { var getJs = document.getElementById("jogo"); if (JS == true) { //if button JS is pressed - it is correct? < script type = "text/javascript" src = "file1.js" > } else < script type = "text/javascript" src = "file2.js" > </script> } </script>
它不工作。 我给了两个button,如果第一个按下, file1.js
应加载。 如果第二个按下,应该加载file2.js
。
我怎样才能做到这一点?
你不能以这种方式在JavaScript中embeddedHTML。 基本上,你想要的是embedded一个脚本元素,点击一个button时指向一个特定的JavaScript文件。 这可以通过将事件与DOM结合来完成:
<script type="application/javascript"> function loadJS(file) { // DOM: Create the script element var jsElm = document.createElement("script"); // set the type attribute jsElm.type = "application/javascript"; // make the script element load file jsElm.src = file; // finally insert the element to the body element in order to load the script document.body.appendChild(jsElm); } </script> <button onclick="loadJS('file1.js');">Load file1.js</button> <button onclick="loadJS('file2.js');">Load file2.js</button>
试试这个大小: dynamic加载JS
function loadjscssfile(filename){ var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js") //dynamically load and add this .js file
JavaScript的:
function loadScript(url) { document.body.appendChild(document.createElement("script")).src = url; } function loadDefaultScript() { loadScript("http://mysite.com/file1.js"); } function loadAlternateScript() { loadScript("http://mysite.com/file2.js"); }
HTML:
<input type="button" onclick="loadAlternateScript()" value="Alternate" /> <input type="button" onclick="loadDefaultScript()" value="Default" />
你可以使用这个function,这将完美的工作
function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file
通过Jquery:
var getJSfile = function(src) { var jsfile = $("<script type='text/javascript' src='"+src+"'>"); $("head").append(jsfile); }; getJSfile ("home.js");