Cet exemple résume les méthodes de chargement dynamiquement JS. Partagez-le pour votre référence. Les détails sont les suivants:
Méthode 1: Document Direct.Write (asynchrone)
Copiez le code comme suit: <Script Language = "JavaScript">
document.write ("<script src = 'res / extwidget / eCharts / xx.js'> <// script>");
</cript>
Puisque cette méthode est un chargement asynchrone, Document.Write réécrira l'interface, qui n'est évidemment pas pratique
Méthode 2: Modifiez dynamiquement l'attribut SRC du script existant (asynchrone)
Copiez le code comme suit: <script src = '' id = "xx"> </ script>
<script linguisse = "javascript">
xx.src = "test.js"
</cript>
Cette méthode ne modifiera pas les éléments d'interface, ne réécrira pas les éléments d'interface, mais sera également chargé de manière asynchrone
Méthode 3: Créer dynamiquement des éléments de script (asynchrones)
Copiez le code comme suit: <cript>
var body = document.getElementsByTagName ('body'). [0];
var script = document.createElement ("script");
script.type = "text / javascript";
script.src = "xx.js";
Body.ApendChild (OScript);
</cript>
Par rapport à la deuxième méthode, l'avantage de cette méthode est qu'il ne nécessite pas d'écriture d'une balise de script sur l'interface au début. L'inconvénient est un chargement asynchrone
Méthode 4: chargement XMLHttpRequest / ActiveXObject (asynchrone)
Copiez le code comme suit: / **
* Chargement asynchrone des scripts JS
* @param id L'ID de la balise <cript> qui doit être définie
* @param url relatif ou chemin absolu vers le fichier js
* /
Loadjs: fonction (id, url) {
var xmlhttp = null;
if (window.activexobject) {// c'est-à-dire
essayer {
// peut être utilisé dans les versions IE6 et ultérieures
xmlhttp = new activeXObject ("msxml2.xmlhttp");
} catch (e) {
//Ie5.5 et les versions ultérieures peuvent être utilisées
xmlhttp = new activeXObject ("Microsoft.xmlhttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = new xmlHttpRequest ();
}
// Utiliser un chargement synchrone
xmlhttp.open ("get", url, false);
// Envoi de la demande de synchronisation,
// Si le navigateur est chrome ou opéra, il doit être publié avant de pouvoir s'exécuter, sinon une erreur sera signalée
xmlhttp.send (null);
xmlhttp.onreadystateChange = function () {
// 4 signifie que les données ont été envoyées
if (xmlhttp.readystate == 4) {
// 0 est la région locale accessible, 200 à 300 signifie que l'accès au serveur réussit.
// 304 signifie que l'accès est le cache sans modification
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementsByTagName ("Body") [0];
var myscript = document.createElement ("script");
myscript.language = "javascript";
myscript.type = "text / javascript";
myscript.id = id;
essayer{
// IE8 et les suivants ne prennent pas en charge cette méthode et doivent être définis via l'attribut texte
myscript.appendChild (document.CreateTextNode (xmlhttp.ResponSeText));
} catch (ex) {
myscript.text = xmlhttp.ResponSeText;
}
myBody.ApendChild (myscript);
}
}
}
// a utilisé un chargement asynchrone
xmlhttp.open ("get", url, true);
xmlhttp.send (null);
}
Réglage sur false dans Open signifie le chargement synchrone. Le chargement synchrone ne nécessite pas de régler un événement sur leclange
Ces quatre méthodes sont exécutées de manière asynchrone, c'est-à-dire, tout en chargeant ces scripts, le script sur la page principale continue de s'exécuter.
Méthode 5: chargement XMLHttpRequest / ActiveXObject (synchrone)
Copiez le code comme suit: / **
* Chargement synchrone des scripts JS
* @param id L'ID de la balise <cript> qui doit être définie
* @param url relatif ou chemin absolu vers le fichier js
* @return {booléen} Renvoie s'il se charge avec succès, vrai signifie succès, faux signifie défaillance
* /
Loadjs: fonction (id, url) {
var xmlhttp = null;
if (window.activexobject) {// c'est-à-dire
essayer {
// peut être utilisé dans les versions IE6 et ultérieures
xmlhttp = new activeXObject ("msxml2.xmlhttp");
} catch (e) {
//Ie5.5 et les versions ultérieures peuvent être utilisées
xmlhttp = new activeXObject ("Microsoft.xmlhttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = new xmlHttpRequest ();
}
// Utiliser un chargement synchrone
xmlhttp.open ("get", url, false);
// Envoyez une demande de synchronisation. Si le navigateur est chrome ou opéra, il doit être publié avant de pouvoir s'exécuter, sinon une erreur sera signalée
xmlhttp.send (null);
// 4 signifie que les données ont été envoyées
if (xmlhttp.readystate == 4) {
// 0 est la zone locale accessible. 200 à 300 signifie que l'accès au serveur réussit et 304 signifie que le cache accessible n'est pas réalisé.
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementsByTagName ("Body") [0];
var myscript = document.createElement ("script");
myscript.language = "javascript";
myscript.type = "text / javascript";
myscript.id = id;
essayer{
// IE8 et les suivants ne prennent pas en charge cette méthode et doivent être définis via l'attribut texte
myscript.appendChild (document.CreateTextNode (xmlhttp.ResponSeText));
} catch (ex) {
myscript.text = xmlhttp.ResponSeText;
}
myBody.ApendChild (myscript);
Retour Vrai;
}autre{
retourne false;
}
}autre{
retourne false;
}
}
J'espère que cet article sera utile à la programmation JavaScript de tous.