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>. . 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. 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() 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. Aquí hay una cita: loadjscssfile("myscript.js", "js") // El navegador carga dinámicamente el archivo cuando se abre la página. En este caso, 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 ya existe, le indicará que ya existe. , atarlo. Aquí hay una cita: Aquí hay una cita: Bien, continuando, a veces la situación puede requerir que elimines o reemplaces un archivo .js o .css agregado. Veamos cómo se hace a continuación.
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("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 podemos vincular el mismo archivo dos veces. No habrá excepción si el navegador vincula dos veces, pero la eficiencia será baja. para evitar
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. eficiencia Desde este punto de vista, 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:
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.