一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档，XML文档都有很特殊的象征:"标签"也叫"节点"。

一个基本的网页格式

<!DOCTYPE />

<head></head>

<body><body />

这些是最基本的形态，但是其实它省略了最外面的一个标签<document>

<document>

      <!DOCTYPE />

      <head></head>

      <body><body/>

</document>

这其实才是它的本来面目（默认把document标签给省略了）。document.body 或者docment.head,无论你的什么操作只要是有关于这个<document>标签的你跟可以利用document获得，因为它是根。网页文档中任何存在在<document>标签里面都是可以获得的，所有的节点其实都是已经被分类好，但它们的nodeType和nodeName不一样而已。

代码写法一：

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);

}

写法二：

function loadScript(){

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

  script.type="text/javascript";

  script.src=null

try{

 script.appendChild(document.createTextNode("//code"));     //javascript内容是利用createTextNode创建的（不过IE不认这个）

}catch(ex){

script.text="//code";                                                                //IE认为SCRIPT节点是个特殊的节点所有有个特殊的text属性

}

  document.body.appendChild(script);   /*兼容IE*/

}

动态加载样式：

// 动态记载样式

function loadStyle(){

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

  style.type="text/css";  //参考网页上的style样式，他怎么写你怎么写

  style.href="style.css";

try{

   style .appendChild(document.createTextNode("//style code"));

}catch(ex){

   style.styleSheet.styleText="//style code";    /*兼容IE*/        //IE也认为style节点是个特殊的节点所有有个特殊的styleSheet.styleText属性 - -

}

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

  head.appchild(link);

}

JavaScript---动态加载script和style样式的更多相关文章

  1. JS学习之动态加载script和style样式

    前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...

  2. JavaScript动态加载script方式引用百度地图API，Uncaught ReferenceError: BMap is not defined

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...

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

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

  4. JavaScript动态加载资源【js|css】示例代码

    在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...

  5. JavaScript动态加载js文件

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

  6. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  7. 动态加载script文件

    动态加载script文件:   http://www.cnblogs.com/skykang/archive/2011/07/21/2112685.html

  8. JavaScript动态加载资源

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

  9. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

随机推荐

  1. 探索JAVA并发 - 可重入锁和不可重入锁

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  2. Android utils 工具类之MD5加密 MD5Utils

    实际开发过程中,密码不会保存明文形式,容易被别人窃取. MD5加密是不可逆的加密算法,只能由明文转换成密文. 但是有些人通过将明文对应的密文保存在数据库中,进行查询破解密文.为防止这种解密,根据许多对 ...

  3. JVM调优之服务内存超过阈值报警

    今早收到一条短信,具体报警信息如下: [UMP JVM监控内存报警]应用名:发券worker(jdos_couponwkr);KEY[coupon.send.worker.jvm],主机名:[host ...

  4. Markdown的常用方法总结

    1.标题 # 大标题 ## 副标题 ### 小标题 标准 2.强调 *斜体类型* **黑体字** 3.折叠 折叠长句 <details><summary>Boostnote是对 ...

  5. Css里的box-shadow的值分别代表什么

    以下为例: box-shadow:1px 2px 3px 4px color inset; 1px:表示沿x轴的正方向的长度(如果是负数,则为沿x轴的负方向的长度); 2px:表示沿y轴的正方向的长度 ...

  6. MFC程序出现uafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator new(unsigned int)解决办法

    在同一个地方摔倒两次之后,决定记录下来这个东西. 问题 1>uafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl opera ...

  7. Python骚操作！一行命令把电脑变成服务器！

    不知道你有没有遇到这么一种情况,就是你有时候想要把电脑上的一些东西传输到你的手机或者 Pad ,你要么需要使用数据线连接到电脑,有时候还要装各种驱动才可以进行数据传输,要么需要借助第三方的工具,在局域 ...

  8. JS查找某个字符在字符串中出现的位置及次数

    var str = 'fdhfgcsaedvcfhgfh'; var index = str.indexOf('f'); // 字符出现的位置 var num = 0; // 这个字符出现的次数 wh ...

  9. JS---DOM---点击操作---part1---20个案例

    点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...

  10. web.xml的常见配置

    web.xml的常见配置 <!-- 配置全局的编码过滤器 --> <filter> <description>编码过滤器</description> & ...