Este artigo apresenta principalmente dois métodos para carregar dinamicamente arquivos JavaScript. Amigos interessados podem se referir a ele.
O primeiro é usar o método AJAX para carregar o código do arquivo de script do plano de fundo para o primeiro plano e, em seguida, implementar o código para o conteúdo carregado por meio de avaliação (). O segundo tipo é criar uma tag de script, configurar seu atributo SRC e carregar JS inserindo a tag de script na cabeça da página, o que equivale a escrever um <script src = "..."> </sCript> na cabeça, mas essa tag de script é criada usando o JS SRC.
Por exemplo, se queremos carregar um callbakc.js dinamicamente, precisamos de uma tag de script:
O código é o seguinte: copie o código da seguinte forma: <script type = "text/javascript" src = "call.js"> </sCript>
O código a seguir é como criar essa tag através de JS (e adicioná -la à cabeça):
O código é o seguinte:
var head = document.getElementsByTagName ('Head') [0]; var script = document.createElement ('script'); script.type = 'text/javascript'; script.src = 'Call.js'; head.appendChild (script);Quando o Call.js é carregado, precisamos chamar os métodos nele. No entanto, após o cabeçalho.appendChild (script), não podemos ligar para o JS imediatamente. Como o navegador carrega esse JS de maneira assíncrona, não sabemos quando será carregado. No entanto, podemos julgar se o Helper.js está carregando ouvindo eventos. (Suponha que exista um método de retorno de chamada em Call.js) O código é o seguinte:
var head = document.getElementsByTagName ('Head') [0]; var script = document.createElement ('script'); script.type = 'text/javascript'; script.onReadyStateChange = function () {if (this.readyState == 'complete') retorno de chamada (); } script.onload = function () {callback (); } script.src = 'helper.js'; head.appendChild (script);Configurei 2 funções de escuta de eventos porque o OnreadyStatechange é usado no IE, enquanto o Onload é suportado por Gecko, navegador do Webkit e operador. De fato, this.ReadyState == 'Complete' não funciona muito bem. Teoricamente, as mudanças do estado são as seguintes:
1.Uninitialized
2. Carregamento
3. Carregado
4. Interativo
5.complete
Mas alguns estados serão ignorados. De acordo com a experiência no IE7, você só pode receber um dos carregados e concluídos, e isso não pode aparecer. O motivo pode ser que você determine se a leitura do cache afeta a mudança no estado ou outros motivos. É melhor alterar a condição de julgamento para este.ReadyState == 'Carred' || this.readyState == 'completo'
Referindo -se à implementação do jQuery, finalmente o implementamos da seguinte maneira: o código é o seguinte:
var head = document.getElementsByTagName ('Head') [0]; var script = document.createElement ('script'); script.type = 'text/javascript'; script.onload = script.onReadyStateChange = function () {if (! this.readyState || this.readyState === "carregado" || this.readyState === "complete") {help (); // manuseie vazamento de memória no script.onload = script.onreadyStateChange = null; }}; script.src = 'helper.js'; head.appendChild (script);Há outra situação simples que você pode escrever a chamada para ajudar () no final do Helper.js, para garantir que a ajuda () possa ser chamada automaticamente depois que o Helper.js é carregado. Obviamente, no final, isso não é adequado para o seu aplicativo.
Observe também:
1. Como a etiqueta de script SRC pode acessar recursos entre domínios, esse método pode simular o Ajax e resolver o problema do acesso ao domínio cruzado do Ajax.
2. Se o código HTML retornado com AJAX contiver script, a inserção do script no HTML diretamente no DOM com o InnerHTML não poderá fazer o script no HTML funcionar. Eu dei uma olhada difícil no código original de jQuery (). Html (html). O jQuery também analisa os parâmetros passados, retira o código do script e cria tags de script dinamicamente. O método HTML usado pelo jQuery é adicionado ao DOM HTML se ele contiver script, ele poderá ser executado. como:
A cópia do código é a seguinte: jQuery ("#Content"). Html ("<cript> alert ('aa'); <// script>");
O acima é o método de carregar dinamicamente os arquivos JavaScript. Espero que seja útil para o aprendizado de todos.