湛蓝之海 发表于 2021-9-15 16:21:54

html动态加载css样式和js脚本示例

一、动态加载脚本
当网站需求变大,脚本的需求也逐步变大。我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本。
比如:我们想在需要检测浏览器的时候,再引入检测文件。


代码如下:
<script type="text/javascript">
    window.onload = function(){
      alert(typeof BrowserDetect);
    }
    var flag = true; //设置 true 再加载
      if (flag) {
            loadScript('browserdetect.js'); //设置加载的 js
      }
    function loadScript(url) {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;
      //document.head.appendChild(script); //document.head 表示<head>
      document.getElementsByTagName('head').appendChild(script);
    }
</script>动态执行 js</p>
<p>
<script type="text/javascript">
    window.onload = function(){
      
    }
    var flag = true; //设置 true 再加载
    if (flag) {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      var text = document.createTextNode("alert('Lee')"); //IE6,7,8 浏览器报错
      script.appendChild(text);
      document.getElementsByTagName('head').appendChild(script);
    }
</script>IE 6,7,8浏览器认为 script 是特殊元素,不能在访问子节点。为了兼容,可以使用 text属性来代替。</p>
<p>
<script type="text/javascript">
    window.onload = function(){
      
    }
    var flag = true; //设置 true 再加载
    if (flag) {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.text = "alert('Lee')";
      script.appendChild(text);
      document.getElementsByTagName('head').appendChild(script);
    }
</script>需要做所有浏览器兼容
二、动态加载样式
为了动态的加载样式表,比如切换网站皮肤。样式表有两种方式进行加载,一种是<link>标签,一种是<style>标签。
动态执行 link

代码如下:
    var flag = true;
    if (flag) {
      loadStyles('basic.css');
    }
    function loadStyles(url) {
      var link = document.createElement('link');link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = url;
      document.getElementsByTagName('head').appendChild(link);
    }

   
动态执行 style


代码如下:
<script type="text/javascript">
    var flag = true;
    if (flag) {
      var style = document.createElement('style');
      style.type = 'text/css';
      //var box= document.createTextNode('#box{background:red}');// IE6,7,8 不支持
      //style.appendChild(box);
      document.getElementsByTagName('head').appendChild(style);
      insertRule(document.styleSheets, '#box', 'background:red', 0);
    }
    function insertRule(sheet, selectorText, cssText, position) {
      //如果是非 IE6,7,8
      if (sheet.insertRule) {
            sheet.insertRule(selectorText + "{" + cssText + "}", position);
            //如果是 IE6,7,8
      } else if (sheet.addRule) {
            sheet.addRule(selectorText, cssText, position);
      }
    }
</script>

https://www.uoften.com/webdesign/xhtml/20180414/68617.html
页: [1]
查看完整版本: html动态加载css样式和js脚本示例