一 动态脚本

// 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能;

// 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本;

 1.动态引入js文件

     var flag = true;

     if(flag){

         loadScript('browserdetect.js');                    // 调用函数,引入路径;

     }

     function loadScript(url){

         var script = document.createElement('script');     // 创建script标签;

         script.type = 'text/javascript';                   // 设置type属性;

         script.src = url;                                  // 引入url;

         document.getElementsByTagName('head')[0].appendChild(script);    // 将script引入<head>中;

     }
 2.动态执行js代码

     var script = document.createElement('script');

     script.type = 'text/javascript';

     var text = document.createTextNode("alert('Lee')");    // 设置script标签内容;IE会报错;

     script.appendChild(text);

     document.getElementsByTagName('head')[0].appendChild(script);

     // PS:IE浏览器认为script是特殊元素,不能再访问子节点;

     // 为了兼容,可以使用text属性来代替;

     function loadScriptString(code){

         var script = document.createElement("script");

         script.type = "text/javascript";

         try{

         // IE浏览器认为script是特殊元素,不能再访问子节点;报错;

             script.appendChild(document.createTextNode(code));　　// W3C方式;

         }catch(ex){

             script.text = code;　　　　　　　　　　　　　　　　　　　　// IE方式;

         }

         document.body.appendChild(script);

     }

     // 调用;

     loadScriptString("function sayHi(){alert('hi')}");

二 动态样式

// 为了动态的加载样式表,比如切换网站皮肤;

// 样式有两种方式进行加载,一种是<link>标签,一种是<style>标签;

 1.动态引入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')[0].appendChild(link);

     }
 2.动态执行style代码

     var flag = true;

     if(flag){

         var style = docuemnt.createElement('style');

         style.type = 'text/css';

         document.getElementsByTagName('head')[0].appendChild(style);

         insertRule(document.styleSheets[0],'#box','background:red',0);

     }

     function insertRule(sheet,selectorText,cssText,position){

         // 如果是非IE;

         if(sheet.insertRule){

             sheet.insertRule(selectorText+"{"+cssText+"}",position);

         // 如果是IE;

         }else if(sheet.addRule){

             sheet.addRule(selectorText,cssText,position);

         }

     }
 // 动态执行style2

     function loadStyleString(css){

         var style = document.createElement("style");

         style.type = "text/css";

         try{

         // IE会报错;不允许向<style>元素添加子节点;

             style.appendChild(document.createTextNode(css));

         }catch(ex){

         // 此时,访问元素的StyleSheet属性,该属性有有一个cssText属性,可以接受CSS代码;

             style.styleSheet.cssText = css;

         }

         var head = document.getElementsByTagName("head")[0];

         head.appendChild(style);

     }

     // 调用;

     loadStyleString("body {background-color:red}");

JavaScript--动态加载脚本和样式(23)的更多相关文章

  1. 第一百一十八节，JavaScript，动态加载脚本和样式

    JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...

  2. JavaScript的DOM_动态加载脚本和样式

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

  3. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  4. JavaScript动态加载资源

    //动态加载样式 function dynamicLoadingCss(path){ if(!path || path.length === 0){ return false; } var head ...

  5. js动态加载脚本

    最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...

  6. JS 动态加载脚本 执行回调

    JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...

  7. jquery动态加载脚本

    如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...

  8. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  9. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

随机推荐

  1. jzoj3084

    發現題目函數本質是: 1.將某一數x的末尾1去掉 2.不斷將這個數/2,直到遇到新的1 我們發現一個數z可以用y步到達數x,記x二進制長度為c,分2種情況討論: 1.x是奇數,則z的前c個二進制數必須 ...

  2. crontab命令使用文档.txt

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  3. (转)linux top命令中各cpu占用率含义及案例分析

    原文:https://blog.csdn.net/ydyang1126/article/details/72820349 linux top命令中各cpu占用率含义 0 性能监控介绍 1 确定应用类型 ...

  4. Metasploit中数据库的密码查看以及使用pgadmin远程连接数据库

    我们都知道,在msf下进行渗透测试工作的时候,可以将结果数据保存到数据库中,方便各个小组成员在渗透测试过程中的数据同步. 例如,Metasploit提供了db_nmap命令,它能够将Nmap扫描结果直 ...

  5. 全网最详细的CentOS7里安装MySQL时出现No package mysql-server available错误的解决办法（图文详解）

    不多说,直接上干货! 直接yum install mysql的话会报错,原因在于yum安装库里没有直接可以用的安装包,此时需要用到MariaDB了,MariaDB是MySQL社区开发的分支,也是一个增 ...

  6. TCP/IP 笔记 - 概述

    Effective communication depends on the use of a common language. 有效沟通取决于使用共同的语言 . TCP/IP协议族 一系列相关协议的 ...

  7. List集合中的对象按照某个字段去重实现

    package com.liying.banana.user; import java.util.ArrayList; import java.util.Comparator; import java ...

  8. postgresql的启停和创建

    一.启停方法 两种方法 1.直接运行postgres进程启动: 2.使用pg_ctl命令启动 postgres -D /home/osdba/pgdata  & 二.停止数据库的三种模式 sm ...

  9. 面试题----makefile文件的作用

    make工具和makefile文件 make工具和makefile文件简介 make命令和makefile文件的结合提供了一个在项目管理领域十分强大的工具.它不仅常被用于控制源代码的编译和链接,而且还 ...

  10. Python 工匠：编写条件分支代码的技巧

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏 作者:朱雷 | 腾讯IEG高级工程师 『Python 工匠』是什么? 我一直觉得编程某种意义是一门『手艺』 ...