blocks|key|391498|text|您可以在页面中动态加载js，而不是另一个js文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|391499|您必须使用getScript来加载js文件。|offset|length|391500|$.getScript("ajax/test.js",+function(data,+textStatus,+jqxhr)+{
++console.log(data);+//+data+returned
++console.log(textStatus);+//+success
++console.log(jqxhr.status);+//+200
++console.log('Load+was+performed.');
});|code-block|syntax|javascript|391501|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.getScript/^0|0|5|9|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You may dynamically load the js inside the page not another js file.
You have to use the <a href="http://api.jquery.com/jQuery.getScript/" rel="nofollow noreferrer">getScript</a> to load the js file.
<pre><code>$.getScript(&quot;ajax/test.js&quot;, function(data, textStatus, jqxhr) {
 console.log(data); // data returned
 console.log(textStatus); // success
 console.log(jqxhr.status); // 200
 console.log('Load was performed.');
});
</code></pre>

blocks|key|173502|text|你可以使用JQuery来完成：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173503|$.getScript("ajax/test.js",+function(data,+textStatus,+jqxhr)+{
++console.log(data);+//data+returned
++console.log(textStatus);+//success
++console.log(jqxhr.status);+//200
++console.log('Load+was+performed.');
});|code-block|syntax|javascript|173504|这个链接应该会有帮助：http://api.jquery.com/jQuery.getScript/|offset|length|173505|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.getScript/^0|0|0|B|13|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can do it using JQuery:

<pre><code>$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
 console.log(data); //data returned
 console.log(textStatus); //success
 console.log(jqxhr.status); //200
 console.log('Load was performed.');
});
</code></pre>

this link should help:
<a href="http://api.jquery.com/jQuery.getScript/" rel="noreferrer">http://api.jquery.com/jQuery.getScript/</a>

blocks|key|391537|text|jQuery的$.getScript()有时会有错误，所以我使用自己的实现，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|391538|jQuery.loadScript+=+function+(url,+callback)+{
++++jQuery.ajax({
++++++++url:+url,
++++++++dataType:+'script',
++++++++success:+callback,
++++++++async:+true
++++});
}|code-block|syntax|javascript|391539|并像这样使用它：|391540|if+(typeof+someObject+==+'undefined')+$.loadScript('url_to_someScript.js',+function(){
++++//Stuff+to+do+after+someScript+has+loaded
});|391541|entityMap^0|7|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

jQuery's <code>$.getScript()</code> is buggy sometimes, so I use my own implementation of it like: 

<pre><code>jQuery.loadScript = function (url, callback) {
 jQuery.ajax({
 url: url,
 dataType: 'script',
 success: callback,
 async: true
 });
}
</code></pre>

and use it like: 

<pre><code>if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
 //Stuff to do after someScript has loaded
});
</code></pre>

blocks|key|173594|text|我的猜测是，在您的纯DOM解决方案中，您做了一些类似的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173595|var+script+=+document.createElement('script');
script.src+=+something;
//do+stuff+with+the+script|code-block|syntax|javascript|173596|首先，这不会起作用，因为脚本没有添加到文档树中，所以不会加载。此外，即使您这样做了，javascript的执行仍会继续，而另一个脚本正在加载，因此在该脚本完全加载之前，它的内容将不可用。|173597|您可以监听脚本的load事件，并按您所希望的那样处理结果。所以：|offset|length|style|CODE|173598|var+script+=+document.createElement('script');
script.onload+=+function+()+{
++++//do+stuff+with+the+script
};
script.src+=+something;

document.head.appendChild(script);+//or+something+of+the+likes|173599|entityMap^0|0|0|0|8|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

My guess is that in your DOM-only solution you did something like:

<pre><code>var script = document.createElement('script');
script.src = something;
//do stuff with the script
</code></pre>

First of all, that won't work because the script is not added to the document tree, so it won't be loaded. Furthermore, even when you do, execution of javascript continues while the other script is loading, so its content will not be available to you until that script is fully loaded.

You can listen to the script's <code>load</code> event, and do things with the results as you would. So:

<pre><code>var script = document.createElement('script');
script.onload = function () {
 //do stuff with the script
};
script.src = something;

document.head.appendChild(script); //or something of the likes
</code></pre>

blocks|key|173632|text|下面是一个动态加载javascript和CSS文件的小lib：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173633|https://github.com/todotresde/javascript-loader|offset|length|173634|我想这对按顺序动态加载css和js文件很有用。|173635|支持扩展以加载任何您想要的库，而不仅仅是主文件，您可以使用它来加载自定义文件。|173636|即：|173637|<html>
<head>
++++<script+src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
++++<script+src="scripts/javascript-loader.js"+type="text/javascript"+charset="utf-8"+></script>++++
++++<script+type="text/javascript">
++++++++$(function()+{

++++++++++++registerLib("threejs",+test);

++++++++++++function+test(){
++++++++++++++++console.log(THREE);
++++++++++++}

++++++++++++registerLib("tinymce",+draw);

++++++++++++function+draw(){
++++++++++++++++tinymce.init({selector:'textarea'});
++++++++++++}

++++++++});+
++++</script>
</head>
<body>
++++<textarea>Your+content+here.</textarea>
</body>|code-block|syntax|javascript|173638|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|15|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

Here is a little lib to load javascript and CSS files dynamically:

<a href="https://github.com/todotresde/javascript-loader" rel="nofollow">https://github.com/todotresde/javascript-loader</a>

I guess is usefull to load css and js files in order and dynamically.

Support to extend to load any lib you want, and not just the main file, you can use it to load custom files.

I.E.:

<pre><code>&lt;html&gt;
&lt;head&gt;
 &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="scripts/javascript-loader.js" type="text/javascript" charset="utf-8" &gt;&lt;/script&gt; 
 &lt;script type="text/javascript"&gt;
 $(function() {

 registerLib("threejs", test);

 function test(){
 console.log(THREE);
 }

 registerLib("tinymce", draw);

 function draw(){
 tinymce.init({selector:'textarea'});
 }

 }); 
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;textarea&gt;Your content here.&lt;/textarea&gt;
&lt;/body&gt;
</code></pre>

blocks|key|391636|text|我建议在AMD+javascript类文件中使用requirejs|type|unstyled|depth|inlineStyleRanges|entityRanges|data|391637|如何在这里使用它的一个很好的例子|391638|http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/|offset|length|391639|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|2H|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

I'm recommend using requirejs with AMD javascript class files

good example of how to use it here 

<a href="http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/" rel="noreferrer">http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/</a>

blocks|key|173711|text|要创作我的插件，我需要在JS文件中加载外部脚本和样式，所有这些都是预定义的。为了实现这一点，我做了以下工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173712|++++this.loadRequiredFiles+=+function+(callback)+{
++++++++var+scripts+=+['xx.js',+'yy.js'];
++++++++var+styles+=+['zz.css'];
++++++++var+filesloaded+=+0;
++++++++var+filestoload+=+scripts.length+%2B+styles.length;
++++++++for+(var+i+=+0;+i+<+scripts.length;+i%2B%2B)+{
++++++++++++log('Loading+script+'+%2B+scripts[i]);
++++++++++++var+script+=+document.createElement('script');
++++++++++++script.type+=+'text/javascript';
++++++++++++script.src+=+scripts[i];
++++++++++++script.onload+=+function+()+{
++++++++++++++++log('Loaded+script');
++++++++++++++++log(this);
++++++++++++++++filesloaded%2B%2B;++//+(This+means+increment,+i.e.+add+one)
++++++++++++++++finishLoad();
++++++++++++};
++++++++++++document.head.appendChild(script);
++++++++}
++++++++for+(var+i+=+0;+i+<+styles.length;+i%2B%2B)+{
++++++++++++log('Loading+style+'+%2B+styles[i]);
++++++++++++var+style+=+document.createElement('link');
++++++++++++style.rel+=+'stylesheet';
++++++++++++style.href+=+styles[i];
++++++++++++style.type+=+'text/css';
++++++++++++style.onload+=+function+()+{
++++++++++++++++log('Loaded+style');
++++++++++++++++log(this);
++++++++++++++++filesloaded%2B%2B;
++++++++++++++++finishLoad();
++++++++++++};
++++++++++++document.head.appendChild(style);
++++++++}
++++++++function+finishLoad()+{
++++++++++++if+(filesloaded+===+filestoload)+{
++++++++++++++++callback();
++++++++++++}
++++++++}
++++};|code-block|syntax|javascript|173713|上下文中的更多脚本：|173714|function+myPlugin()+{

++++var+opts+=+{
++++++++verbose:+false
++++};++++++++++++++++++++++++++///<+The+options+required+to+run+this+function
++++var+self+=+this;++++++++++++///<+An+alias+to+'this'+in+case+we're+in+jQuery+++++++++++++++++++++++++///<+Constants+required+for+this+function+to+work

++++this.getOptions+=+function()+{
++++++++return+opts;
++++};

++++this.setOptions+=+function(options)+{
++++++++for+(var+x+in+options)+{
++++++++++++opts[x]+=+options[x];
++++++++}
++++};

++++/**
+++++*+@brief+Load+the+required+files+for+this+plugin
+++++*+@param+{Function}+callback+A+callback+function+to+run+when+all+files+have+been+loaded
+++++*/
++++this.loadRequiredFiles+=+function+(callback)+{
++++++++var+scripts+=+['xx.js',+'yy.js'];
++++++++var+styles+=+['zz.css'];
++++++++var+filesloaded+=+0;
++++++++var+filestoload+=+scripts.length+%2B+styles.length;
++++++++for+(var+i+=+0;+i+<+scripts.length;+i%2B%2B)+{
++++++++++++log('Loading+script+'+%2B+scripts[i]);
++++++++++++var+script+=+document.createElement('script');
++++++++++++script.type+=+'text/javascript';
++++++++++++script.src+=+scripts[i];
++++++++++++script.onload+=+function+()+{
++++++++++++++++log('Loaded+script');
++++++++++++++++log(this);
++++++++++++++++filesloaded%2B%2B;
++++++++++++++++finishLoad();
++++++++++++};
++++++++++++document.head.appendChild(script);
++++++++}
++++++++for+(var+i+=+0;+i+<+styles.length;+i%2B%2B)+{
++++++++++++log('Loading+style+'+%2B+styles[i]);
++++++++++++var+style+=+document.createElement('link');
++++++++++++style.rel+=+'stylesheet';
++++++++++++style.href+=+styles[i];
++++++++++++style.type+=+'text/css';
++++++++++++style.onload+=+function+()+{
++++++++++++++++log('Loaded+style');
++++++++++++++++log(this);
++++++++++++++++filesloaded%2B%2B;
++++++++++++++++finishLoad();
++++++++++++};
++++++++++++document.head.appendChild(style);
++++++++}
++++++++function+finishLoad()+{
++++++++++++if+(filesloaded+===+filestoload)+{
++++++++++++++++callback();
++++++++++++}
++++++++}
++++};

++++/**
+++++*+@brief+Enable+user-controlled+logging+within+this+function
+++++*+@param+{String}+msg+The+message+to+log
+++++*+@param+{Boolean}+force+True+to+log+message+even+if+user+has+set+logging+to+false
+++++*/
++++function+log(msg,+force)+{
++++++++if+(opts.verbose+%7C%7C+force)+{
++++++++++++console.log(msg);
++++++++}
++++}

++++/**
+++++*+@brief+Initialise+this+function
+++++*/
++++this.init+=+function()+{
++++++++self.loadRequiredFiles(self.afterLoadRequiredFiles);
++++};

++++this.afterLoadRequiredFiles+=+function+()+{
++++++++//+Do+stuff
++++};

}|173715|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To author my plugin I needed to load external scripts and styles inside a JS file, all of which were predefined. To achieve this, I did the following:

<pre><code> this.loadRequiredFiles = function (callback) {
 var scripts = ['xx.js', 'yy.js'];
 var styles = ['zz.css'];
 var filesloaded = 0;
 var filestoload = scripts.length + styles.length;
 for (var i = 0; i &lt; scripts.length; i++) {
 log('Loading script ' + scripts[i]);
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = scripts[i];
 script.onload = function () {
 log('Loaded script');
 log(this);
 filesloaded++; // (This means increment, i.e. add one)
 finishLoad();
 };
 document.head.appendChild(script);
 }
 for (var i = 0; i &lt; styles.length; i++) {
 log('Loading style ' + styles[i]);
 var style = document.createElement('link');
 style.rel = 'stylesheet';
 style.href = styles[i];
 style.type = 'text/css';
 style.onload = function () {
 log('Loaded style');
 log(this);
 filesloaded++;
 finishLoad();
 };
 document.head.appendChild(style);
 }
 function finishLoad() {
 if (filesloaded === filestoload) {
 callback();
 }
 }
 };
</code></pre>

More of the script in context:

<pre><code>function myPlugin() {

 var opts = {
 verbose: false
 }; ///&lt; The options required to run this function
 var self = this; ///&lt; An alias to 'this' in case we're in jQuery ///&lt; Constants required for this function to work

 this.getOptions = function() {
 return opts;
 };

 this.setOptions = function(options) {
 for (var x in options) {
 opts[x] = options[x];
 }
 };

 /**
 * @brief Load the required files for this plugin
 * @param {Function} callback A callback function to run when all files have been loaded
 */
 this.loadRequiredFiles = function (callback) {
 var scripts = ['xx.js', 'yy.js'];
 var styles = ['zz.css'];
 var filesloaded = 0;
 var filestoload = scripts.length + styles.length;
 for (var i = 0; i &lt; scripts.length; i++) {
 log('Loading script ' + scripts[i]);
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = scripts[i];
 script.onload = function () {
 log('Loaded script');
 log(this);
 filesloaded++;
 finishLoad();
 };
 document.head.appendChild(script);
 }
 for (var i = 0; i &lt; styles.length; i++) {
 log('Loading style ' + styles[i]);
 var style = document.createElement('link');
 style.rel = 'stylesheet';
 style.href = styles[i];
 style.type = 'text/css';
 style.onload = function () {
 log('Loaded style');
 log(this);
 filesloaded++;
 finishLoad();
 };
 document.head.appendChild(style);
 }
 function finishLoad() {
 if (filesloaded === filestoload) {
 callback();
 }
 }
 };

 /**
 * @brief Enable user-controlled logging within this function
 * @param {String} msg The message to log
 * @param {Boolean} force True to log message even if user has set logging to false
 */
 function log(msg, force) {
 if (opts.verbose || force) {
 console.log(msg);
 }
 }

 /**
 * @brief Initialise this function
 */
 this.init = function() {
 self.loadRequiredFiles(self.afterLoadRequiredFiles);
 };

 this.afterLoadRequiredFiles = function () {
 // Do stuff
 };

}
</code></pre>

blocks|key|173752|text|我需要经常这样做，所以我使用下面的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173753|var+loadJS+=+function(url,+implementationCode,+location){
++++//url+is+URL+of+external+file,+implementationCode+is+the+code
++++//to+be+called+from+the+file,+location+is+the+location+to+
++++//insert+the+<script>+element

++++var+scriptTag+=+document.createElement('script');
++++scriptTag.src+=+url;

++++scriptTag.onload+=+implementationCode;
++++scriptTag.onreadystatechange+=+implementationCode;

++++location.appendChild(scriptTag);
};
var+yourCodeToBeCalled+=+function(){
//your+code+goes+here
}
loadJS('yourcode.js',+yourCodeToBeCalled,+document.body);|code-block|syntax|javascript|173754|有关更多信息，请参阅此站点的How+do+I+include+a+JavaScript+file+in+another+JavaScript+file?，它是我的函数想法的来源。|offset|length|173755|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file^0|0|0|E|1Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I need to do this frequently, so I use this:

<pre><code>var loadJS = function(url, implementationCode, location){
 //url is URL of external file, implementationCode is the code
 //to be called from the file, location is the location to 
 //insert the &lt;script&gt; element

 var scriptTag = document.createElement('script');
 scriptTag.src = url;

 scriptTag.onload = implementationCode;
 scriptTag.onreadystatechange = implementationCode;

 location.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
//your code goes here
}
loadJS('yourcode.js', yourCodeToBeCalled, document.body);
</code></pre>

For more information, see this site <a href="https://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file">How do I include a JavaScript file in another JavaScript file?</a>, which is the source of my function idea.

blocks|key|173789|text|亡灵法术。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|173790|我用它来加载依赖的脚本；|173791|它可以与IE8%2B一起工作，而不需要添加对其他库的任何依赖，比如jQuery！|173792|var+cScriptLoader+=+(function+()
{
++++function+cScriptLoader(files)
++++{
++++++++var+_this+=+this;
++++++++this.log+=+function+(t)
++++++++{
++++++++++++console.log("ScriptLoader:+"+%2B+t);
++++++++};
++++++++this.withNoCache+=+function+(filename)
++++++++{
++++++++++++if+(filename.indexOf("?")+===+-1)
++++++++++++++++filename+%2B=+"?no_cache="+%2B+new+Date().getTime();
++++++++++++else
++++++++++++++++filename+%2B=+"&no_cache="+%2B+new+Date().getTime();
++++++++++++return+filename;
++++++++};
++++++++this.loadStyle+=+function+(filename)
++++++++{
++++++++++++//+HTMLLinkElement
++++++++++++var+link+=+document.createElement("link");
++++++++++++link.rel+=+"stylesheet";
++++++++++++link.type+=+"text/css";
++++++++++++link.href+=+_this.withNoCache(filename);
++++++++++++_this.log('Loading+style+'+%2B+filename);
++++++++++++link.onload+=+function+()
++++++++++++{
++++++++++++++++_this.log('Loaded+style+"'+%2B+filename+%2B+'".');
++++++++++++};
++++++++++++link.onerror+=+function+()
++++++++++++{
++++++++++++++++_this.log('Error+loading+style+"'+%2B+filename+%2B+'".');
++++++++++++};
++++++++++++_this.m_head.appendChild(link);
++++++++};
++++++++this.loadScript+=+function+(i)
++++++++{
++++++++++++var+script+=+document.createElement('script');
++++++++++++script.type+=+'text/javascript';
++++++++++++script.src+=+_this.withNoCache(_this.m_js_files[i]);
++++++++++++var+loadNextScript+=+function+()
++++++++++++{
++++++++++++++++if+(i+%2B+1+<+_this.m_js_files.length)
++++++++++++++++{
++++++++++++++++++++_this.loadScript(i+%2B+1);
++++++++++++++++}
++++++++++++};
++++++++++++script.onload+=+function+()
++++++++++++{
++++++++++++++++_this.log('Loaded+script+"'+%2B+_this.m_js_files[i]+%2B+'".');
++++++++++++++++loadNextScript();
++++++++++++};
++++++++++++script.onerror+=+function+()
++++++++++++{
++++++++++++++++_this.log('Error+loading+script+"'+%2B+_this.m_js_files[i]+%2B+'".');
++++++++++++++++loadNextScript();
++++++++++++};
++++++++++++_this.log('Loading+script+"'+%2B+_this.m_js_files[i]+%2B+'".');
++++++++++++_this.m_head.appendChild(script);
++++++++};
++++++++this.loadFiles+=+function+()
++++++++{
++++++++++++//+this.log(this.m_css_files);
++++++++++++//+this.log(this.m_js_files);
++++++++++++for+(var+i+=+0;+i+<+_this.m_css_files.length;+%2B%2Bi)
++++++++++++++++_this.loadStyle(_this.m_css_files[i]);
++++++++++++_this.loadScript(0);
++++++++};
++++++++this.m_js_files+=+[];
++++++++this.m_css_files+=+[];
++++++++this.m_head+=+document.getElementsByTagName("head")[0];
++++++++//+this.m_head+=+document.head;+//+IE9%2B+only
++++++++function+endsWith(str,+suffix)
++++++++{
++++++++++++if+(str+===+null+%7C%7C+suffix+===+null)
++++++++++++++++return+false;
++++++++++++return+str.indexOf(suffix,+str.length+-+suffix.length)+!==+-1;
++++++++}
++++++++for+(var+i+=+0;+i+<+files.length;+%2B%2Bi)
++++++++{
++++++++++++if+(endsWith(files[i],+".css"))
++++++++++++{
++++++++++++++++this.m_css_files.push(files[i]);
++++++++++++}
++++++++++++else+if+(endsWith(files[i],+".js"))
++++++++++++{
++++++++++++++++this.m_js_files.push(files[i]);
++++++++++++}
++++++++++++else
++++++++++++++++this.log('Error+unknown+filetype+"'+%2B+files[i]+%2B+'".');
++++++++}
++++}
++++return+cScriptLoader;
})();
var+ScriptLoader+=+new+cScriptLoader(["foo.css",+"Scripts/Script4.js",+"foobar.css",+"Scripts/Script1.js",+"Scripts/Script2.js",+"Scripts/Script3.js"]);
ScriptLoader.loadFiles();|code-block|syntax|javascript|173793|如果您对用于创建以下内容的typescript-version感兴趣：|offset|length|173794|class+cScriptLoader+{
++++private+m_js_files:+string[];
++++private+m_css_files:+string[];
++++private+m_head:HTMLHeadElement;
++++
++++private+log+=+(t:any)+=>
++++{
++++++++console.log("ScriptLoader:+"+%2B+t);
++++}
++++
++++
++++constructor(files:+string[])+{
++++++++this.m_js_files+=+[];
++++++++this.m_css_files+=+[];
++++++++this.m_head+=+document.getElementsByTagName("head")[0];
++++++++//+this.m_head+=+document.head;+//+IE9%2B+only
++++++++
++++++++
++++++++function+endsWith(str:string,+suffix:string):boolean+
++++++++{
++++++++++++if(str+===+null+%7C%7C+suffix+===+null)
++++++++++++++++return+false;
++++++++++++++++
++++++++++++return+str.indexOf(suffix,+str.length+-+suffix.length)+!==+-1;
++++++++}
++++++++
++++++++
++++++++for(let+i:number+=+0;+i+<+files.length;+%2B%2Bi)+
++++++++{
++++++++++++if(endsWith(files[i],+".css"))
++++++++++++{
++++++++++++++++this.m_css_files.push(files[i]);
++++++++++++}
++++++++++++else+if(endsWith(files[i],+".js"))
++++++++++++{
++++++++++++++++this.m_js_files.push(files[i]);
++++++++++++}
++++++++++++else
++++++++++++++++this.log('Error+unknown+filetype+"'+%2B+files[i]+%2B'".');
++++++++}
++++++++
++++}
++++
++++
++++public+withNoCache+=+(filename:string):string+=>
++++{
++++++++if(filename.indexOf("?")+===+-1)
++++++++++++filename+%2B=+"?no_cache="+%2B+new+Date().getTime();
++++++++else
++++++++++++filename+%2B=+"&no_cache="+%2B+new+Date().getTime();
++++++++++++
++++++++return+filename;++++
++++}
++++

++++public+loadStyle+=+(filename:string)+=>
++++{
++++++++//+HTMLLinkElement
++++++++let+link+=+document.createElement("link");
++++++++link.rel+=+"stylesheet";
++++++++link.type+=+"text/css";
++++++++link.href+=+this.withNoCache(filename);
++++++++
++++++++this.log('Loading+style+'+%2B+filename);
++++++++link.onload+=+()+=>
++++++++{
++++++++++++this.log('Loaded+style+"'+%2B+filename+%2B+'".');
++++++++++++
++++++++};
++++++++
++++++++link.onerror+=+()+=>
++++++++{
++++++++++++this.log('Error+loading+style+"'+%2B+filename+%2B+'".');
++++++++};
++++++++
++++++++this.m_head.appendChild(link);
++++}
++++
++++
++++public+loadScript+=+(i:number)+=>+
++++{
++++++++let+script+=+document.createElement('script');
++++++++script.type+=+'text/javascript';
++++++++script.src+=+this.withNoCache(this.m_js_files[i]);
++++++++
++++++++var+loadNextScript+=+()+=>+
++++++++{
++++++++++++if+(i+%2B+1+<+this.m_js_files.length)
++++++++++++{
++++++++++++++++this.loadScript(i+%2B+1);
++++++++++++}
++++++++}
++++++++
++++++++script.onload+=+()+=>
++++++++{
++++++++++++this.log('Loaded+script+"'+%2B+this.m_js_files[i]+%2B+'".');
++++++++++++loadNextScript();
++++++++};
++++++++
++++++++
++++++++script.onerror+=+()+=>
++++++++{
++++++++++++this.log('Error+loading+script+"'+%2B+this.m_js_files[i]+%2B+'".');
++++++++++++loadNextScript();
++++++++};
++++++++
++++++++
++++++++this.log('Loading+script+"'+%2B+this.m_js_files[i]+%2B+'".');
++++++++this.m_head.appendChild(script);
++++}
++++
++++public+loadFiles+=+()+=>+
++++{
++++++++//+this.log(this.m_css_files);
++++++++//+this.log(this.m_js_files);
++++++++
++++++++for(let+i:number+=+0;+i+<+this.m_css_files.length;+%2B%2Bi)
++++++++++++this.loadStyle(this.m_css_files[i])
++++++++
++++++++this.loadScript(0);
++++}
++++
}


var+ScriptLoader+=+new+cScriptLoader(["foo.css",+"Scripts/Script4.js",+"foobar.css",+"Scripts/Script1.js",+"Scripts/Script2.js",+"Scripts/Script3.js"]);
ScriptLoader.loadFiles();|173795|如果要加载脚本的动态列表，请将脚本写入一个属性，例如data-main，例如<script+src="scriptloader.js"+data-main="file1.js,file2.js,file3.js,etc."+></script>|style|CODE|173796|做一个element.getAttribute("data-main").split(',')|173797|比如|173798|var+target+=+document.currentScript+%7C%7C+(function()+{
++var+scripts+=+document.getElementsByTagName('script');
++//+Note:+this+is+for+IE+as+IE+doesn't+support+currentScript
++//+this+does+not+work+if+you+have+deferred+loading+with+async
++//+e.g.+<script+src="..."+async="async"+></script>
++//+https://web.archive.org/web/20180618155601/https://www.w3schools.com/TAgs/att_script_async.asp
++return+scripts[scripts.length+-+1];
})();

target.getAttribute("data-main").split(',')|173799|以获取列表。|173800|entityMap|0|LINK|mutability|MUTABLE|url|http://www.typescriptlang.org/play/^0|0|0|0|0|D|A|0|0|0|12|2C|0|3|18|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1D|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1E|8|@]|9|@$M|1F|N|1G|1|1H]]|A|$]]|$1|O|3|P|5|H|7|1I|8|@]|9|@]|A|$I|J]]|$1|Q|3|R|5|6|7|1J|8|@$M|1K|N|1L|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1M|8|@$M|1N|N|1O|S|T]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|H|7|1Q|8|@]|9|@]|A|$I|J]]|$1|10|3|11|5|6|7|1R|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

Necromancing.
I use this to load dependant scripts; 
it works with IE8+ without adding any dependency on another library like jQuery ! 
<pre><code>var cScriptLoader = (function ()
{
 function cScriptLoader(files)
 {
 var _this = this;
 this.log = function (t)
 {
 console.log(&quot;ScriptLoader: &quot; + t);
 };
 this.withNoCache = function (filename)
 {
 if (filename.indexOf(&quot;?&quot;) === -1)
 filename += &quot;?no_cache=&quot; + new Date().getTime();
 else
 filename += &quot;&amp;no_cache=&quot; + new Date().getTime();
 return filename;
 };
 this.loadStyle = function (filename)
 {
 // HTMLLinkElement
 var link = document.createElement(&quot;link&quot;);
 link.rel = &quot;stylesheet&quot;;
 link.type = &quot;text/css&quot;;
 link.href = _this.withNoCache(filename);
 _this.log('Loading style ' + filename);
 link.onload = function ()
 {
 _this.log('Loaded style &quot;' + filename + '&quot;.');
 };
 link.onerror = function ()
 {
 _this.log('Error loading style &quot;' + filename + '&quot;.');
 };
 _this.m_head.appendChild(link);
 };
 this.loadScript = function (i)
 {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = _this.withNoCache(_this.m_js_files[i]);
 var loadNextScript = function ()
 {
 if (i + 1 &lt; _this.m_js_files.length)
 {
 _this.loadScript(i + 1);
 }
 };
 script.onload = function ()
 {
 _this.log('Loaded script &quot;' + _this.m_js_files[i] + '&quot;.');
 loadNextScript();
 };
 script.onerror = function ()
 {
 _this.log('Error loading script &quot;' + _this.m_js_files[i] + '&quot;.');
 loadNextScript();
 };
 _this.log('Loading script &quot;' + _this.m_js_files[i] + '&quot;.');
 _this.m_head.appendChild(script);
 };
 this.loadFiles = function ()
 {
 // this.log(this.m_css_files);
 // this.log(this.m_js_files);
 for (var i = 0; i &lt; _this.m_css_files.length; ++i)
 _this.loadStyle(_this.m_css_files[i]);
 _this.loadScript(0);
 };
 this.m_js_files = [];
 this.m_css_files = [];
 this.m_head = document.getElementsByTagName(&quot;head&quot;)[0];
 // this.m_head = document.head; // IE9+ only
 function endsWith(str, suffix)
 {
 if (str === null || suffix === null)
 return false;
 return str.indexOf(suffix, str.length - suffix.length) !== -1;
 }
 for (var i = 0; i &lt; files.length; ++i)
 {
 if (endsWith(files[i], &quot;.css&quot;))
 {
 this.m_css_files.push(files[i]);
 }
 else if (endsWith(files[i], &quot;.js&quot;))
 {
 this.m_js_files.push(files[i]);
 }
 else
 this.log('Error unknown filetype &quot;' + files[i] + '&quot;.');
 }
 }
 return cScriptLoader;
})();
var ScriptLoader = new cScriptLoader([&quot;foo.css&quot;, &quot;Scripts/Script4.js&quot;, &quot;foobar.css&quot;, &quot;Scripts/Script1.js&quot;, &quot;Scripts/Script2.js&quot;, &quot;Scripts/Script3.js&quot;]);
ScriptLoader.loadFiles();
</code></pre>
If you are interested in the <a href="http://www.typescriptlang.org/play/" rel="nofollow noreferrer">typescript</a>-version used to create this:
<pre><code>class cScriptLoader {
 private m_js_files: string[];
 private m_css_files: string[];
 private m_head:HTMLHeadElement;
 
 private log = (t:any) =&gt;
 {
 console.log(&quot;ScriptLoader: &quot; + t);
 }
 
 
 constructor(files: string[]) {
 this.m_js_files = [];
 this.m_css_files = [];
 this.m_head = document.getElementsByTagName(&quot;head&quot;)[0];
 // this.m_head = document.head; // IE9+ only
 
 
 function endsWith(str:string, suffix:string):boolean 
 {
 if(str === null || suffix === null)
 return false;
 
 return str.indexOf(suffix, str.length - suffix.length) !== -1;
 }
 
 
 for(let i:number = 0; i &lt; files.length; ++i) 
 {
 if(endsWith(files[i], &quot;.css&quot;))
 {
 this.m_css_files.push(files[i]);
 }
 else if(endsWith(files[i], &quot;.js&quot;))
 {
 this.m_js_files.push(files[i]);
 }
 else
 this.log('Error unknown filetype &quot;' + files[i] +'&quot;.');
 }
 
 }
 
 
 public withNoCache = (filename:string):string =&gt;
 {
 if(filename.indexOf(&quot;?&quot;) === -1)
 filename += &quot;?no_cache=&quot; + new Date().getTime();
 else
 filename += &quot;&amp;no_cache=&quot; + new Date().getTime();
 
 return filename; 
 }
 

 public loadStyle = (filename:string) =&gt;
 {
 // HTMLLinkElement
 let link = document.createElement(&quot;link&quot;);
 link.rel = &quot;stylesheet&quot;;
 link.type = &quot;text/css&quot;;
 link.href = this.withNoCache(filename);
 
 this.log('Loading style ' + filename);
 link.onload = () =&gt;
 {
 this.log('Loaded style &quot;' + filename + '&quot;.');
 
 };
 
 link.onerror = () =&gt;
 {
 this.log('Error loading style &quot;' + filename + '&quot;.');
 };
 
 this.m_head.appendChild(link);
 }
 
 
 public loadScript = (i:number) =&gt; 
 {
 let script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = this.withNoCache(this.m_js_files[i]);
 
 var loadNextScript = () =&gt; 
 {
 if (i + 1 &lt; this.m_js_files.length)
 {
 this.loadScript(i + 1);
 }
 }
 
 script.onload = () =&gt;
 {
 this.log('Loaded script &quot;' + this.m_js_files[i] + '&quot;.');
 loadNextScript();
 };
 
 
 script.onerror = () =&gt;
 {
 this.log('Error loading script &quot;' + this.m_js_files[i] + '&quot;.');
 loadNextScript();
 };
 
 
 this.log('Loading script &quot;' + this.m_js_files[i] + '&quot;.');
 this.m_head.appendChild(script);
 }
 
 public loadFiles = () =&gt; 
 {
 // this.log(this.m_css_files);
 // this.log(this.m_js_files);
 
 for(let i:number = 0; i &lt; this.m_css_files.length; ++i)
 this.loadStyle(this.m_css_files[i])
 
 this.loadScript(0);
 }
 
}


var ScriptLoader = new cScriptLoader([&quot;foo.css&quot;, &quot;Scripts/Script4.js&quot;, &quot;foobar.css&quot;, &quot;Scripts/Script1.js&quot;, &quot;Scripts/Script2.js&quot;, &quot;Scripts/Script3.js&quot;]);
ScriptLoader.loadFiles();
</code></pre>
If it's to load a dynamic list of scripts, write the scripts into an attribute, such as data-main, e.g.
<code>&lt;script src=&quot;scriptloader.js&quot; data-main=&quot;file1.js,file2.js,file3.js,etc.&quot; &gt;&lt;/script&gt;</code> 
and do a <code>element.getAttribute(&quot;data-main&quot;).split(',')</code>
such as
<pre><code>var target = document.currentScript || (function() {
 var scripts = document.getElementsByTagName('script');
 // Note: this is for IE as IE doesn't support currentScript
 // this does not work if you have deferred loading with async
 // e.g. &lt;script src=&quot;...&quot; async=&quot;async&quot; &gt;&lt;/script&gt;
 // https://web.archive.org/web/20180618155601/https://www.w3schools.com/TAgs/att_script_async.asp
 return scripts[scripts.length - 1];
})();

target.getAttribute(&quot;data-main&quot;).split(',')
</code></pre>
to obtain the list.

I have a dynamic web page where I need to import an external JS file (under an <code>IF</code> condition) inside another javascript file.

I tried to search for a feasible solution but it didn't work.

I have tried loading a JS file to the DOM using <code>document.createElement()</code> but it also didn't work. Apparently the Js was loaded into the DOM but was not accessible in the current JS file.

Solution in jQuery will also be fine

Dynamically load JS inside JS

jQuery

我有一个动态网页，我需要在另一个javascript文件中导入一个外部JS文件(在IF条件下)。我试图寻找一个可行的解决方案，但没有奏效。我曾尝试使用document.createElement()将JS文件加载到DOM中，但同样不起作用。显然，Js已加载到DOM中，但在当前JS文件中无法访问。jQuery中的解决方案...

问在JS中动态加载JS
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JS中动态加载JSEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JS中动态加载JS
EN