導讀跟大家講解下有關如何動態引入JS文件，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說如何動態引入JS文件，小編也收集到了有
跟大家講解下有關如何動態引入JS文件，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說如何動態引入JS文件，小編也收集到了有關如何動態引入JS文件的相關資料，希望大家看到了會喜歡。
這次給大家帶來如何動態引入JS文件，動態引入JS文件的注意事項有哪些，下面就是實戰案例，一起來看一下。index.html
<html> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type"> <title> </title> <script src='' id="s1"></script> <script src="dynamic.js"></script> </head> <body> </body> </html>test.js
alert("hello! I am test.js"); var str="1";dynamic.js
//第一種方式：直接document.write 但這樣會把當前的頁面全覆寫掉 //document.write("<script src='test.js'><\/script>"); //第二種方式:動態改變已有script的src屬性 //s1.src="test.js" //第三種方式：動態創建script元素 //其實原理就是利用dom動態的引入一個js到文件中來~就能和原有的js通信了~ //alert(str); function GetHttpRequest() { if ( window.XMLHttpRequest ) // Gecko return new XMLHttpRequest() ; else if ( window.ActiveXObject ) // IE return new ActiveXObject("MsXml2.XmlHttp") ; } function ajaxPage(sId, url){ var oXmlHttp = GetHttpRequest() ; oXmlHttp.onreadystatechange = function() { if (oXmlHttp.readyState == 4) { includeJS( sId, url, oXmlHttp.responseText ); } } oXmlHttp.open('GET', url, false);//同步操作 oXmlHttp.send(null); } function includeJS(sId, fileUrl, source) { if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ var oHead = document.getElementsByTagName('HEAD').item(0); var oScript = document.createElement( "script" ); oScript.type = "text/javascript"; oScript.id = sId; oScript.text = source; oHead.appendChild( oScript ); } } ajaxPage( "scrA", "test.js" ); alert( "主頁面動態加載JS腳本。"); alert( "主頁面動態加載a.js并取其中的變量：" + str );相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
JS生成范圍隨機與序列隨機步驟詳解
es6的class特性使用案例詳解
在JS中如何使用call、apply
以上就是如何動態引入JS文件的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網
免責聲明：本文由用戶上傳，如有侵權請聯系刪除！