常見的在線客服系統中，或者是統計代碼中，粘貼一段js代碼，就能引入某個插件的效果，這個是怎么實作的呢？
原理非常的簡單：
對于不同的加載檔案型別創建不同的節點，然后添加各自的屬性，最后扔到head 標簽里面，
經測驗，本方法兼容各瀏覽器，安全、無毒、環保，是 web 開發人員作業常備代碼，
//動態加載css function dynamicLoadCss(url){ var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type='text/css'; link.rel = 'stylesheet'; link.href = url; head.appendChild(link); } //動態加載js檔案 function dynamicLoadJs(url, callback){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; if(typeof(callback)=='function'){ script.onload = script.onreadystatechange = function () { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete"){ callback(); script.onload = script.onreadystatechange = null; } }; } head.appendChild(script); }
上面是自己使用的函式，
封裝兩個函式，可以直接動態加載一些js檔案或者css樣式檔案
基于動態加載js原理實作的 sdk代碼
在開發出客服系統以后，我需要提供一個遠程js檔案，供別人引入，但是我要把這個程序封裝一下，
下面這段是我開發的客服系統js sdk代碼，可以直接粘貼這段代碼到頁面中，實際查看效果
<a href=https://www.cnblogs.com/taoshihan/p/"javascript:KEFU.showPanel();">自定義按鈕</a> <script type='text/javascript'> (function(a, b, c, d) { let h = b.getElementsByTagName('head')[0];let s = b.createElement('script'); s.type = 'text/javascript';s.src = https://www.cnblogs.com/taoshihan/p/c+"/static/js/kefu-front.js";s.onload = s.onreadystatechange = function () { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") d(c); };h.appendChild(s); })(window, document,"https://gofly.v1kf.com",function(u){ KEFU.init({ KEFU_URL:u, KEFU_KEFU_ID: "taoshihan", KEFU_ENT: "5", }) }); </script>
效果圖是下面這樣的，也可以參照這個頁面，https://gofly.v1kf.com
十年開發經驗程式員，離職全心創業中，歷時三年開發出的產品《唯一客服系統》
一款基于Golang+Vue開發的在線客服系統，軟體著作權編號：2021SR1462600，一套可私有化部署的網站在線客服系統，編譯后的二進制檔案可直接使用無需搭開發環境，下載zip解壓即可，僅依賴MySQL資料庫，是一個開箱即用的全渠道在線客服系統，致力于幫助廣大開發者/公司快速部署整合私有化客服功能， 開源地址：唯一客服（開源學習版） 官網地址：唯一客服官網轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534189.html
標籤：JavaScript
上一篇：應用程式現代化權威指南
下一篇：瀑布流使用虛擬串列性能優化