Maison > Article > interface Web > js/css charge dynamiquement les plug-ins JS
Cette fois, je vais vous présenter le plug-in JS à chargement dynamique js/css. Quelles sont les précautions lors de la création du plug-in JS à chargement dynamique js/css. Ce qui suit est un cas pratique, jetons un coup d'oeil.
JavaScript crée un nœudAjouter au corps ou à la tête
Ajouter du code js :
var n = document.createElement("script"); n.setAttribute("type", "text/javascript"); n.setAttribute("src", i);document.body.appendChild(n); document.head.appendChild(n);
Écrivez un code pour ajouter dynamiquement un nœud js :
/* es6 中 函数设置默认参数可以使用 例:function 函数名(变量= 默认值) {...} 如果想要兼容可以使用 例:function 函数名(变量) {if(变量==undefined){变量= 默认值}....} */function cr_node(i, l = "body") { //创建节点并添加 t = i.split(".").reverse()[0];//获取后缀 var n = null; if (t == "js") {//后缀判断 n = document.createElement("script"); n.setAttribute("type", "text/javascript"); n.setAttribute("src", i); } else if (t == "css") { n = document.createElement("link"); n.setAttribute("rel", "stylesheet"); n.setAttribute("href", i); } if (n != null) { if (l == "body") { document.body.appendChild(n); } else if (l == "head") { document.head.appendChild(n); } else { l.appendChild(n); } } return n; }
//添加bootstrap样式cr_node("http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css","head")//默认添加jquery到<body>...</body>cr_node("http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js");//添加jquery到<head>...</head>cr_node("http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js","head");//添加jquery到<div id="id">...</div>cr_node("http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js",document.getElementById("id"))
2 Ajouter une fonction d'événement de liaison
Ajouter un seul nœud et lier l'événement
function cr_node(i, l = "body") {....}function addNode(o, c = undefined) { //单个添加 var n = null; if(typeof(o) == "object") { n = cr_node(o.src, (o.parent ? o.parent : "body")); if(typeof(o.load) == "function") { n.onload = o.load; //绑定加载事件 } if(typeof(o.err) == "function") { n.onerror = o.err; //绑定错误事件 } } else if(typeof(o) == "string") { n = cr_node(o); //直接添加节点 if(typeof(c) == "function") { n.onerror = n.onload = c; //绑定加载事件 } } }Instructions d'utilisation :
//直接使用addNode("http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js",function(){...});//完整使用addNode({ "src": "http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js", "load": function() { console.log("加载成功"); console.log($("body").html()); }, "err":function() { console.log("加载失败"); }, "parent": document.getElementById("id")//不写默认是body})3. Essayez d'écrire une fonction pour l'ajout par lotsSi vous ajoutez simplement, vous pouvez utiliser la fonction suivante :
function addNodes(o, index = 0) { //多个添加 if (o.src.length > index && typeof(o.src) == "object" && o.src.length > 0) { var n = cr_node(o.src[index], o.parent); if (o.src.length - 1 == index && typeof(o.load) == "function") { n.onerror = n.onload = o.load; } else { n.onerror = n.onload = function() { addNodes(o, index + 1); } } } }Exemples d'utilisation :
addNodes({ "src":["http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css","http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js","http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js","http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"],"parent":"head", "load":function(){ console.log(1111); console.log($("body").html()); } })Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP ! Lecture connexe :
Comment utiliser s-xlsx pour importer et exporter des fichiers Excel
Comment utiliser JavaScript pour enregistrer les données texte
Téléchargement du point d'arrêt segmenté du fichier du navigateur
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!