一个网页里面的内容理解为一个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. PuppeteerSharp读取页面完整HTML(.NetCore)

    1.使用NUGET安装PuppeteerSharp 通过工具或者命令方式安装 2.初始化浏览器 await new BrowserFetcher().DownloadAsync(BrowserFetc ...

  2. styled-components：解决react的css无法作为组件私有样式的问题

    react中的css在一个文件中导入,是全局的,对其他组件标签都会有影响. 使用styled-components第三方模块来解决,并且styled-components还可以将标签和样式写到一起,作 ...

  3. SpringCloud微服务的Eureka

    一.什么是微服务架构 架构设计概念,各服务间隔离(分布式也是隔离),自治(分布式依赖整体组合)其它特性(单一职责,边界,异步通信,独立部署)是分布式概念的跟严格执行SOA到微服务架构的演进过程 作用: ...

  4. 树上前k大的包含不重复结点的长链

    一棵树,不一定是二叉树,在每个结点最多只属于一条链的情况下,处理出其中最长的前k个的长度. 最近训练赛做到两道题了,有必要总结一下. 不过我不知道是否有更专门的叫法. 借鉴了这位大佬的博客:https ...

  5. IPFS学习-DNS链接

    DNSLink 什么是DNS链接 DNS链接使用DNS TXT记录映射域名(如ipfs.io)到一个IPFS地址.因为你可以编辑自己的DNS记录,可以使他们总是指向最新版本的IPFS中的对象(如果修改 ...

  6. springboot~yml里的自定义配置~续

    之前写了关于读取自定义配置的文章springboot~yml里的自定义配置,而今天主要说一下对复杂配置信息的读取方法,我们简单的配置用@Value注解就可以了,而结构复杂的一般使用@Configura ...

  7. 老师傅珍藏多年CAD常用快捷键合集，收藏，工作效率翻倍！

    想要熟练操作CAD,做一名出色的CAD绘图员,少不了勤学苦练,还要掌握一些常用的绘图命令以及常用快捷键. 今天就来跟大家分享超全的CAD绘图命令,以及常用快捷键,学会涨工资! 常用快捷键: CTRL快 ...

  8. [转]为何选择 Flink

    本文转自:https://www.ituring.com.cn/book/tupubarticle/23229 第 1 章 为何选择 Flink 人们对某件事的正确理解往往来自基于有效论据的结论.要获 ...

  9. C lang:Array_Multidimensional arrays

    #include<stdio.h> #include<windows.h> #define YEARS 5 #define MONTHS 12 void color(short ...

  10. JAVA开发几个常用快捷键