Home > Others

JS Dynamic Loading JS File instance method detailed

Source: Internet
Author: User
Tags button type instance method
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞


1, Direct document.write

The code is as follows Copy Code

<script language= "JavaScript" >
document.write ("<script src= ' test.js ' ></script>");
</script>

2, dynamically changing the SRC attribute of the existing script

The code is as follows Copy Code

<script src= ' id= "S1" ></script>
<script language= "JavaScript" >
S1.src= "Test.js"
</script>

3. Dynamically creating script elements

The code is as follows Copy Code

<script>
var ohead = document.getElementsByTagName (' head '). Item (0);
var oscript= document.createelement ("script");
Oscript.type = "Text/javascript";
Oscript.src= "Test.js";
Ohead.appendchild (Oscript);
</script>

Above three kinds of methods can be suitable for my request, but personally feel not applicable, so look for jquery/45691.htm ">jquery dynamic load JS file, this does not have a very good code

The code is as follows Copy Code

<script type= "Text/javascript" src= ". /jquery.js "></script>
<script type= "Text/javascript" >
$ (function ()
{
$ (' #loadButton '). Click (function () {
$.getscript (' New.js ', function () {
Newfun (' Checking new script ');//This function is inside the new.js, run this function when clicked click
});
});
});
</script>
<body>
<button type= "button" id= "Loadbutton" >Load</button>

The above code can fully meet my requirements, and the following attached a code to load JS and CSS code

Dynamic load js, css file code:

  code is as follows copy code
Dynamic load File code
$.extend ({
Includepath: ",
Include:function (file) {
var files = typeof File = = "string"? [File]: file;
for (var i = 0; i < files.length; i++) {
var name = Files[i].replace (/^s|s$/g, "");
var att = name.split ('. ');
var ext = att[att.length-1].tolowercase ();
var iscss = ext = "CSS";
var tag = iscss? "Link": "Script";
var attr = iscss? "Type= ' text/css ' rel= ' stylesheet '": "language= ' JavaScript ' type= ' Text/javascript '";
var link = (iscss? "href": "src") + "= '" + $.includepath + name + "'";
if ($ (tag + "[" + link + "]"). Length = = 0) document.write ("");
}
}
});
How to use
$.includepath = ' scripts/workspace/';
$.include ([' getvehiclegroup.js ']);

Note: The code department is reproduced. But it's been used.

2. Immediate use of the method in the JS file

Because it is dynamically loaded. Consider the reasons for the network. Use the methods in the JS file immediately to make an error. But you can use the bottom code

The code is as follows Copy Code

function _getvehiclegroup () {

if ("undefined" = = typeof (Getvehiclegroupisok)) {
SetTimeout ("_getvehiclegroup ()", 200);
Return

}
The method of dynamically loading JS file
Getvehiclegroup ();
}

Note: To add a tag to the JS file to be loaded, such as:

  code is as follows copy code

var Getvehiclegroupisok = "Enable";

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
node js create file node js file access validate js file node js log to file php code in js file how to use php in js file node js download file from server

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More