常见的在线客服系统中，或者是统计代码中，粘贴一段js代码，就能引入某个插件的效果。这个是怎么实现的呢？
原理非常的简单：
对于不同的加载文件类型创建不同的节点，然后添加各自的属性，最后扔到head 标签里面。
经测试，本方法兼容各浏览器，安全、无毒、环保，是 web 开发人员工作常备代码。
代码语言：javascript复制//动态加载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代码，可以直接粘贴这段代码到页面中，实际查看效果
代码语言：javascript复制<a href="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 = 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
