Cargue dinámicamente archivos CSS y JS externos usando DOM para crear etiquetas <script> o <link> y adjuntarles atributos, como tipo, etc. Luego use el método appendChild para vincular la etiqueta a otra etiqueta, generalmente a <head>.
solicitud:
1. Mejorar la reutilización del código y reducir la cantidad de código;
2. Agregue un controlador y una sesión de JavaScript para cambiar dinámicamente el estilo de la página;
3. Dado que la página carga archivos secuencialmente de arriba a abajo y los explica durante la carga, puede agregar un controlador JavaScript para controlar el orden de carga de los archivos de la página. Por ejemplo, cargue primero el archivo de diseño CSS y luego muestre el archivo de embellecimiento CSS. con imágenes Luego cargue el archivo falsh grande o cárguelo según la importancia del contenido.
Para cargar un archivo .js o .css dinámicamente, en pocas palabras, significa usar métodos DOM para crear primero un nuevo y elegante elemento "script" o "LINK", asignarle los atributos apropiados y, finalmente, usar element.appendChild() para agregar el elemento a la ubicación deseada dentro del árbol del documento. Suena mucho más elegante de lo que realmente es. Veamos cómo se combina todo.
El siguiente trabajo es vincularse a la etiqueta <head>. Un problema al vincular es que el mismo archivo se puede vincular dos veces. No habrá excepción si el navegador se vincula dos veces, pero la eficiencia será baja. Para evitar esta situación, podemos agregar una nueva variable de matriz global y guardar el nombre del archivo vinculado en ella. Antes de cada vinculación, verifique si ya existe. Si existe, le indicará que ya existe. no existe, vincúlelo.
| document.getElementsByTagName("cabeza")[0].appendChild(fileref) |
Al hacer referencia al elemento HEAD de la página primero y luego llamar a appendChild(), esto significa que el elemento recién creado se agrega al final de la etiqueta HEAD. Además, debe tener en cuenta que ningún elemento existente resulta dañado al agregar la etiqueta HEAD. nuevo elemento, es decir, si llamas a loadjscssfile("myscript.js", "js") dos veces, terminarás con dos nuevos elementos "script", ambos apuntando al mismo archivo Javascript. Esto es problemático solo desde un. desde el punto de vista de la eficiencia, ya que agregará elementos redundantes a la página y utilizará memoria innecesaria del navegador en el proceso. Una forma sencilla de evitar que el mismo archivo se agregue más de una vez es realizar un seguimiento de los archivos agregados por loadjscssfile(). y solo carga un archivo si es nuevo:
| var filesadded="" //Guarda la variable de matriz que tiene nombres de archivos vinculados función checkloadjscssfile(nombre de archivo, tipo de archivo){ if (filesadded.indexOf("["+filename+"]")==-1){//indexOf determina si hay un elemento en la matriz loadjscssfile(nombre de archivo, tipo de archivo) filesadded+="["+filename+"]" //Agrega el nombre del archivo a filesadded } demás alert("¡archivo ya agregado!")//Preguntar si ya existe } checkloadjscssfile("myscript.js", "js") //éxito checkloadjscssfile("myscript.js", "js") //archivo redundante, por lo que no se agrega el archivo |
función loadjscssfile(nombre de archivo, tipo de archivo){ if (filetype=="js"){ //Determina el tipo de archivo var fileref=document.createElement('script')//Crear etiqueta fileref.setAttribute("type","text/javascript")//Definir el valor del tipo de atributo como texto/javascript fileref.setAttribute("src", filename)//La dirección del archivo } else if (filetype=="css"){ //Determina el tipo de archivo var fileref=document.createElement("enlace") fileref.setAttribute("rel", "hoja de estilo") fileref.setAttribute("tipo", "texto/css") fileref.setAttribute("href", nombre de archivo) } if (tipo de fileref!="indefinido") document.getElementsByTagName("cabeza")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") // El navegador carga dinámicamente el archivo cuando se abre la página. loadjscssfile("javascript.php", "js") // El navegador carga dinámicamente "javascript.php" cuando se abre la página. loadjscssfile("mystyle.css", "css") // El navegador carga dinámicamente el archivo .css cuando se abre la página. |