动态加载js和css

2017-02-16 15:14:14

开发过程中经常需要动态加载js和css，今天特意总结了一下常用的方法。

 1、动态加载js

　　方法一：动态加载js文件

复制代码

1     // 动态加载js脚本文件2     function loadScript(url) {3         var script = document.createElement("script");4         script.type = "text/javascript";5         script.src = url;6         document.body.appendChild(script);7     }8     // 测试9     loadScript("javascript/lib/cookie.js");

复制代码

　　方法二：动态加载js脚本

复制代码

 1 　　 // 动态加载js脚本 2     function loadScriptString(code) { 3         var script = document.createElement("script"); 4         script.type = "text/javascript"; 5         try{ 6             // firefox、safari、chrome和Opera 7             script.appendChild(document.createTextNode(code)); 8         }catch(ex) { 9             // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。10             script.text = code;11         }12         document.body.appendChild(script);13     }14     // 测试15     var text = "function test(){alert('test');}";16     loadScriptString(text);17     test();

复制代码

2、动态加载css

　　方法一：动态加载css文件

复制代码

 1     // 动态加载css文件 2     function loadStyles(url) { 3         var link = document.createElement("link"); 4         link.type = "text/css"; 5         link.rel = "stylesheet"; 6         link.href = url; 7         document.getElementsByTagName("head")[0].appendChild(link); 8     } 9     // 测试10     loadStyles("css/secondindex.css");

复制代码

　　方法二：动态加载css脚本

复制代码

 1 　　 // 动态加载css脚本 2     function loadStyleString(cssText) { 3         var style = document.createElement("style"); 4         style.type = "text/css"; 5         try{ 6             // firefox、safari、chrome和Opera 7             style.appendChild(document.createTextNode(cssText)); 8         }catch(ex) { 9             // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性10             style.styleSheet.cssText = cssText;11         }12         document.getElementsByTagName("head")[0].appendChild(style);13     }14     // 测试15     var css = "body{color:blue;}";16     loadStyleString(css);

复制代码

 


  • 精彩推荐

  • 2018-04-07 23:35:16

    使用Intent传递对象的两种方式

    Intent 的用法相信你已经比较熟悉了，我们可以借助它来启动活动、发送广播、启动服务等。在进行上述操作的时候，我们还可以在Intent 中添加一些附加数据，以达到传值的效果，比如在FirstActivity 中添加如下代码：

  • 2018-04-10 14:59:59

    JS实现数组去重方法总结(六种方法)

    这篇文章给大家总结下JS实现数组去重方法(六种方法)，面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法，感兴趣的朋友跟随脚本之家小编一起学习吧

  • 2018-04-13 17:28:33

    jsoup 使用总结4--高级用法之 script js 脚本

    大部分时候，我们使用jsoup解析网页的时候，都是直接找到某一类元素，或者按某种selector查询；具体使用方法可以参考jsoup官网文档 那么你有没有实际操作过，查找script js 脚本呢，因为很多时候页面的内容是根据js动态生成的，或者数据是动态变更；那么这个时候，我们只是获取html页面中script js脚本之间的内容。

  • 2018-04-15 12:56:05

    WebView控件之WebSettings各种配置方法源码总结

    WebSettings用于管理WebView状态配置，当WebView第一次被创建时，WebView包含着一个默认的配置，这些默认的配置将通过get方法返回，通过WebView中的getSettings方法获得一个WebSettings对象，如果一个WebView被销毁，在WebSettings中所有回调方法将抛出IllegalStateException异常。

  • 2018-04-16 07:28:10

    android点击事件，第一次无效，第二次才响应的问题

    今天碰到的问题，android的标题栏一个回退button，每次进入的时候第一次点击无效，一直到第二次点击时才响应，然后把代码copy到系统的回退按钮里面，结果每次都能响应，后面想了想，应该跟焦点有关系