Análise de princípio: Etapa 1: Use o DOM para criar tags <script> ou <link> e anexe atributos a elas, como type Etapa 2: Use o método appendChild para vincular a tag a outra tag, geralmente a <head >. .Aplicação
:
1. Melhorar a reutilização de código e reduzir a quantidade de código
2. Adicionar um controlador javascript e uma sessão pode alterar dinamicamente o estilo da página
3. Como a página carrega arquivos sequencialmente de cima para baixo e os carrega simultaneamente, explicou Bian; para que você possa adicionar um controlador javascript para controlar a ordem de carregamento dos arquivos de página, como carregar o arquivo de layout css primeiro, depois exibir o arquivo de embelezamento css com imagens e, em seguida, carregar o arquivo falsh grande ou carregar de acordo com a importância do contente.
Dica de leitura: Iniciantes que não são bons em escrita eletrônica podem ler chinês diretamente e depois copiar o código e experimentá-lo.
Para carregar um arquivo .js ou .css dinamicamente, em poucas palavras, significa usar métodos DOM para primeiro criar um novo elemento "script" ou "LINK", atribuir a ele os atributos apropriados e, finalmente, usar element.appendChild()
para adicionar o elemento ao localdesejado
na árvore do documento Parece muito mais sofisticado do que realmente é.
função loadjscssfile(nome do arquivo, tipo de arquivo){
if (filetype=="js"){ //Determina o tipo de arquivo
var fileref=document.createElement('script')//Criar tag
fileref.setAttribute("type","text/javascript")//Defina o valor do tipo de atributo como text/javascript
fileref.setAttribute("src", nome do arquivo)//O endereço do arquivo
}
else if (filetype=="css"){ //Determina o tipo de arquivo
var fileref=document.createElement("link")
fileref.setAttribute("rel", "folha de estilo")
fileref.setAttribute("tipo", "texto/css")
fileref.setAttribute("href", nome do arquivo)
}
if (typeof fileref! = "indefinido")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //O navegador carrega o arquivo dinamicamente quando a página é aberta.
loadjscssfile("javascript.php", "js") // O navegador carrega dinamicamente "javascript.php" quando a página é aberta.
loadjscssfile("mystyle.css", "css") //O navegador carrega dinamicamente o arquivo .css quando a página é aberta.
A próxima tarefa é vincular à tag <head>. Um problema ao vincular é que o mesmo arquivo pode ser vinculado duas vezes. Não haverá exceção se o navegador for vinculado duas vezes, mas a eficiência será baixa. Para evitar
esta situação, podemos adicionar uma nova variável de array global e salvar o nome do arquivo vinculado nela. Antes de cada ligação, verifique se ela já existe. não existe, vincule-o.
Aqui está uma citação:
document.getElementsByTagName("head")[0].appendChild(fileref)
Referindo-se primeiro ao elemento HEAD da página e depois chamando appendChild(), isso significa que o elemento recém-criado é adicionado bem no final da tag HEAD. Além disso, você deve estar ciente de que nenhum elemento existente é prejudicado na adição da tag HEAD. novo elemento - isto é, se você chamar loadjscssfile("myscript.js", "js") duas vezes, agora você terá dois novos elementos "script", ambos apontando para o mesmo arquivo Javascript. ponto de vista de eficiência, já que você adicionará elementos redundantes à página e usará memória desnecessária do navegador no processo. Uma maneira simples de evitar que o mesmo arquivo seja adicionado mais de uma vez é controlar os arquivos adicionados por loadjscssfile(),. e carregue apenas um arquivo se for novo:
A seguir está um fragmento entre aspas:
var filesadded="" //Salva a variável de array que possui nomes de arquivos vinculados
function checkloadjscssfile(nome do arquivo, tipo de arquivo){
if (filesadded.indexOf("["+filename+"]")==-1){//indexOf determina se há um item na matriz
loadjscssfile(nome do arquivo, tipo de arquivo)
filesadded+="["+filename+"]" //Adiciona o nome do arquivo a filesadded
}
outro
alert("arquivo já adicionado!") // Avisa se já existe
}
checkloadjscssfile("myscript.js", "js") //sucesso
checkloadjscssfile("myscript.js", "js") //arquivo redundante, então arquivo não adicionado
Aqui estou apenas detectando grosseiramente para ver se um arquivo definido para ser adicionado já existe em uma lista de nomes de arquivos adicionados armazenados na variável filesadded antes de decidir se devo prosseguir ou não.
Ok, continuando, às vezes a situação pode exigir isso. você realmente remove ou substitui um arquivo .js ou .css adicionado. Vamos ver como isso é feito a seguir.