Carregue dinamicamente arquivos CSS e JS externos usando DOM para criar tags <script> ou <link> e anexar atributos a eles, como tipo, etc. Em seguida, use o método appendChild para vincular a tag a outra tag, geralmente a <head>.
aplicativo:
1. Melhore a reutilização de código e reduza a quantidade de código;
2. Adicione um controlador javascript e uma sessão para alterar dinamicamente o estilo da página;
3. Como a página carrega os arquivos sequencialmente de cima para baixo e os explica durante o carregamento, você pode adicionar um controlador JavaScript para controlar a ordem de carregamento dos arquivos da página. Por exemplo, carregue o arquivo de layout CSS primeiro e, em seguida, exiba o arquivo de embelezamento CSS. com fotos. Em seguida, carregue o arquivo falsh grande ou carregue-o de acordo com a importância do conteúdo.
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 local desejado na árvore do documento Parece muito mais sofisticado do que realmente é.
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.
| 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:
| 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 |
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. |