动态加载js的方法汇总_javascript技巧-js教程-PHP中文网

本文实例汇总了动态加载js的方法。分享给大家供大家参考。具体如下：

方法一：直接document.write（异步）

复制代码 代码如下: document.write(" "); 由于这种方式是异步加载，document.write会重写界面，明显不实用 方法二：动态改变已有script的src属性（异步）

复制代码 代码如下: xx.src="test.js" 此种方法不会改变界面元素，不重写界面元素，但同样是异步加载 方法三：动态创建script元素（异步）

复制代码 代码如下: var body= document.getElementsByTagName('BODY').[0]; var script= document.createElement("script"); script.type = "text/javascript"; script.src="xx.js"; body.appendChild( oScript); 此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签，缺点还是异步加载

方法四：XMLHttpRequest/ActiveXObject加载（异步）

复制代码 代码如下: /** * 异步加载js脚本 * @param id 需要设置的 标签的id * @param url js文件的相对路径或绝对路径 */ loadJs:function(id,url){ var xmlHttp = null; if(window.ActiveXObject){//IE try { //IE6以及以后版本中可以使用 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { //IE5.5以及以后版本可以使用 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } }else if(window.XMLHttpRequest){ //Firefox，Opera 8.0 ，Safari，Chrome xmlHttp = new XMLHttpRequest(); } //采用同步加载 xmlHttp.open("GET",url,false); //发送同步请求， //如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错 xmlHttp.send(null); xmlHttp.onreadystatechange = function(){ //4代表数据发送完毕 if( xmlHttp.readyState == 4 ){ //0为访问的本地，200到300代表访问服务器成功， //304代表没做修改访问的是缓存 if((xmlHttp.status >= 200 && xmlHttp.status var myBody = document.getElementsByTagName("BODY")[0]; var myScript = document.createElement( "script" ); myScript.language = "javascript"; myScript.type = "text/javascript"; myScript.id = id; try{ //IE8以及以下不支持这种方式，需要通过text属性来设置 myScript.appendChild(document.createTextNode(xmlHttp.responseText)); }catch (ex){ myScript.text = xmlHttp.responseText; } myBody.appendChild(myScript); } } } //采用异步加载 xmlHttp.open("GET",url,true); xmlHttp.send(null); } open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件

这四种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行。

方法五：XMLHttpRequest/ActiveXObject加载（同步）

复制代码 代码如下: /** * JS-Skript synchron laden * @param id Die ID des -Tags, das festgelegt werden muss * @param url Relativer Pfad oder absoluter Pfad der JS-Datei * @return {Boolean} Gibt zurück, ob der Ladevorgang erfolgreich war, true steht für Erfolg, false steht für Fehler */ loadJs:function(id,url){ var xmlHttp = null; if(window.ActiveXObject){//IE Versuchen Sie es mit { //Kann in IE6 und späteren Versionen verwendet werden xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } Catch (e) { //IE5.5 und spätere Versionen können verwendet werden xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } }else if(window.XMLHttpRequest){ //Firefox, Opera 8.0, Safari, Chrome xmlHttp = new XMLHttpRequest(); } //Synchrones Laden verwenden xmlHttp.open("GET",url,false); //Sende eine synchrone Anfrage. Wenn der Browser Chrome oder Opera ist, muss er vor der Ausführung veröffentlicht werden, andernfalls wird ein Fehler gemeldet xmlHttp.send(null); //4 bedeutet, dass die Daten gesendet wurden if(xmlHttp.readyState == 4){ //0 ist der lokale Zugriff, 200 bis 300 bedeutet, dass der Zugriff auf den Server erfolgreich ist, 304 bedeutet, dass auf den Cache ohne Änderung zugegriffen wird If((xmlHttp.status >= 200 && xmlHttp.status var myBody = document.getElementsByTagName("BODY")[0]; var myScript = document.createElement( "script" ); myScript.sprache = "javascript"; myScript.type = "text/javascript"; myScript.id = id; versuche es{ //IE8 und niedriger unterstützen diese Methode nicht und müssen über das Textattribut festgelegt werden myScript.appendChild(document.createTextNode(xmlHttp.responseText)); }catch (ex){ myScript.text = xmlHttp.responseText; } myBody.appendChild(myScript); Rückgabe wahr; }else{ Rückgabe falsch; } }else{ Rückgabe falsch; } }

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

动态加载js的方法汇总_javascript技巧