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

最新推荐文章于 2022-02-28 13:53:23 发布

.NET跨平台

最新推荐文章于 2022-02-28 13:53:23 发布

阅读量4.7k

点赞数 4

分类专栏： Html+Javascript

Html+Javascript 专栏收录该内容

258 篇文章 12 订阅

订阅专栏

本文实例讲述了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

function loadScript(url, callback) {
   var script = document.createElement("script");
   script.type = "text/javascript";
   if (typeof (callback) != "undefined") {
     if (script.readyState) {
       script.onreadystatechange = function () {
         if (script.readyState == "loaded" || script.readyState == "complete") {
           script.onreadystatechange = null;
           callback();
         }
       };
     } else {
       script.onload = function () {
         callback();
       };
     }
   };
   script.src = url;
   document.body.appendChild(script);
}

loadScript("https://cdn.bootcss.com/jquery/3.2.1/jquery.js", function() { 
   //加载,并执行回调函数
   alert('动态引入jquery成功')
});

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>