动态加载css,js,动态创建link标签,script标签

欢迎点击: 个人官网博客

老规矩,先上效果图
在这里插入图片描述

创建Link标签,防止css缓存

   //createLink('./css/phone.css')为了防止css缓存,你还可以加上?v=new Date()
  function createLink(cssURL) {
    
    
            let head = document.getElementsByTagName('head')[0]
            let linkTag = document.createElement('link')
            linkTag.id = 'dynamic-style';
            linkTag.href = cssURL;
            linkTag.setAttribute('rel', 'stylesheet');
            linkTag.setAttribute('media', 'all');
            linkTag.setAttribute('type', 'text/css');
            head.appendChild(linkTag);
        }

创建script标签

function loadJS(url, callback) {
    
    
            var script = document.createElement('script'),
                fn = callback || function () {
    
    };
            script.type = 'text/javascript';
            //IE
            if (script.readyState) {
    
    
                script.onreadystatechange = function () {
    
    
                    if (script.readyState == 'loaded' || script.readyState == 'complete') {
    
    
                        script.onreadystatechange = null;
                        fn();
                    }
                };
            } else {
    
    
                //其他浏览器
                script.onload = function () {
    
    
                    fn();
                };
            }
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script);
        }
        
//loadJS('./js/pc.js', function () {
    
    
//    console.log('回调')
//});

猜你喜欢

转载自blog.csdn.net/qq_41560520/article/details/114941025