动态加载、移除js/css文件的示例代码

动态加载、移除js/css文件是Web前端开发中常用的技术。通过动态加载js/css文件，可以在页面运行时动态地添加、更新或移除应用中的样式和脚本。

以下是动态加载、移除js/css文件的示例代码攻略：

动态加载js文件

动态加载js文件可以通过创建script标签并将其添加到文档中来实现。下面是一个简单的示例代码：

function loadJS(url, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  if (script.readyState) { // IE
    script.onreadystatechange = function () {
      if (script.readyState == "loaded" || script.readyState == "complete") {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else { //Other browsers
    script.onload = function () {
      callback();
    };
  }
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

其中，loadJS函数接受两个参数：要加载的JS文件的URL和加载完成后要执行的回调函数。

使用示例：

loadJS('https://cdn.jsdelivr.net/npm/vue/dist/vue.js', function () {
  console.log('Vue.js has been loaded!');
});

动态加载css文件

动态加载css文件可以通过创建link标签并将其添加到文档中来实现。下面是一个简单的示例代码：

function loadCSS(url, callback) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = url;

  if (typeof callback === 'function') {
    link.onload = function() {
      callback();
    };
  }

  document.getElementsByTagName('head')[0].appendChild(link);
}

其中，loadCSS函数接受两个参数：要加载的CSS文件的URL和加载完成后要执行的回调函数。

使用示例：

loadCSS('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', function () {
   console.log('Bootstrap CSS has been loaded!');
});

移除js文件

移除js文件可以通过获取script标签并将其从文档中移除来实现。下面是一个简单的示例代码：

function removeJS(url){
  var scripts = document.getElementsByTagName('script');
  for(var i=0;i<scripts.length;i++){
    if(scripts[i].src.includes(url)){
      document.getElementsByTagName('head')[0].removeChild(scripts[i]);
      break;
    }
  }
}

其中，removeJS函数接受一个参数：要移除的JS文件的URL。

使用示例：

removeJS('https://cdn.jsdelivr.net/npm/vue/dist/vue.js');

移除css文件

移除css文件可以通过获取link标签并将其从文档中移除来实现。下面是一个简单的示例代码：

function removeCSS(url){
  var links = document.getElementsByTagName('link');
  for(var i=0;i<links.length;i++){
    if(links[i].href.includes(url)){
      document.getElementsByTagName('head')[0].removeChild(links[i]);
      break;
    }
  }
}

其中，removeCSS函数接受一个参数：要移除的CSS文件的URL。

使用示例：

removeCSS('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');