JS实现动态添加外部js、css到head标签的方法

ゝ一纸荒年。 2021-06-26 16:06 541阅读 0赞

本文实例讲述了JS实现动态添加外部`js、css`到`head`标签的方法。

function appendJQCDN() { 
       var head = document.head || document.getElementsByTagName('head')[0];
       var script = document.createElement('script');
       var style = document.createElement('style');
       script.setAttribute("src", "https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js");
       style.innerHTML = '';
       head.appendChild(script);
       head.appendChild(style);
    }

**动态添加 js**

--------------------

## JS动态添加`iframe`的代码 ##

一般对于ie9以上的浏览器、chrome等浏览器都可以支持

var iframe = document.createElement('iframe'); 
    iframe.src="//www.jb51.net";  
    document.body.appendChild(iframe);

但考虑浏览器的兼容性问题可以使用下面的代码

try{   
       var iframe = document.createElement('<iframe name="ifr"></iframe>');  
    }
    catch(e){  
        var iframe = document.createElement('iframe');  
        iframe.name = 'ifr';  
    }

或者

if(ie && version < 9) { 
      var iframe = document.createElement('<iframe src="//www.jb51.net"></iframe>');
    } else { 
      var iframe = document.createElement('iframe');
      iframe.setAttribute('src','//www.jb51.net');
    }

## `JavaScript`动态添加`css`样式和`script`标签 ##

### \[动态添加css样式\] ###

<html>
    　　<head>
    　　　　<script type="text/javascript"> 　　　　　　window.onload=function(){ 　　　　　　　　var head=document.getElementsByTagName('head')[0];　//获取到head元素　 　　　　　　　　var link=document.createElement('link');　　//创建link元素节点，也就是link标签 　　　　　　　　　　link.rel="stylesheet";　　//为link标签添加rel属性 　　　　　　　　　　link.href="basic.css";　　//为link标签添加href属性 ， 属性值是css外链样式表的路径 　　　　　　　　head.appendChild(link);　　//将link元素节点添加到head元素子节点下 　　　　　　　　 　} 　　　　</script>
    　　</head>
    　　<body>
    　　　　<div id="div1">测试</div>
    　　</body>
    </html>

### \[动态添加`script`标签\] ###

原理同上

<html>
    　　<head>
    　　　　<script type="text/javascript"> 　　　　　　　window.onload=function(){ 　　　　　　　　var head=document.getElementsByTagName('head')[0];　//获取到head元素　 　　　　　　　　var script=document.createElement('script');　//创建script标签 　　　　　　　　　　script.type="text/javascript";　//为script标签添加type属性　　　　　　　　　 　　　　　　　　　　script.src="basic.js";　//为script标签添加scr属性，属性值为js路径 　　　　　　　　head.appendChild('script');　//将script标签添加到head的子节点下 } 　　　　</script>
    　　</head>
    　　<body>
    　　　　<div id="div1">测试</div>
    　　</body>
    </html>