Análisis de principios: Paso 1: use DOM para crear etiquetas <script> o <link> y adjúnteles atributos, como tipo. Paso 2: use el método appendChild para vincular la etiqueta a otra etiqueta, generalmente a <head>. .Aplicación
:
1. Mejorar la reutilización del código y reducir la cantidad de código;
2. Agregar un controlador y una sesión de JavaScript puede cambiar dinámicamente el estilo de la página
3. Debido a que la página carga archivos secuencialmente de arriba a abajo y los carga simultáneamente, explicó Bian, por lo tanto, puede agregar un controlador javascript para controlar el orden de carga de los archivos de página, como cargar primero el archivo de diseño css, luego mostrar el archivo de embellecimiento css con imágenes y luego cargar el archivo falsh grande, o cargar según la importancia del contenido.
Consejo de lectura: los principiantes que no son buenos escribiendo electrónicamente pueden leer chino directamente y luego copiar el código y probarlo.
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() 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:
Aquí está la cita:
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.
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.
Aquí hay una cita:
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 cargue un archivo si es nuevo:
El siguiente es un fragmento citado:
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
Aquí simplemente estoy detectando crudamente para ver si un archivo que está configurado para agregarse ya existe dentro de una lista de nombres de archivos agregados almacenados en archivos variables agregados antes de decidir si continuar o no.
Ok, continuando, a veces la situación puede requerir eso. en realidad elimina o reemplaza un archivo .js o .css agregado. Veamos cómo se hace a continuación.