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

一个基本的网页格式

  1. <!DOCTYPE />
  2. <head></head>
  3. <body><body />

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

  1. <document>
  2.       <!DOCTYPE />
  3.       <head></head>
  4.       <body><body/>
  5. </document>

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

代码写法一：

  1. function loadScript(url, callback) {
  2.     var script = document.createElement("script");
  3.     script.type = "text/javascript";
  4.     if (typeof (callback) != "undefined") {
  5.         if (script.readyState) {
  6.             script.onreadystatechange = function () {
  7.                 if (script.readyState == "loaded" || script.readyState == "complete") {
  8.                     script.onreadystatechange = null;
  9.                     callback();
  10.                 }
  11.             };
  12.         } else {
  13.             script.onload = function () {
  14.                 callback();
  15.             };
  16.         }
  17.     };
  18.     script.src = url;
  19.     document.body.appendChild(script);
  20. }

写法二：

  1. function loadScript(){
  2.   var script=document.createElement("script");
  3.   script.type="text/javascript";
  4.   script.src=null
  5. try{
  6.  script.appendChild(document.createTextNode("//code"));     //javascript内容是利用createTextNode创建的（不过IE不认这个）
  7. }catch(ex){
  8. script.text="//code";                                                                //IE认为SCRIPT节点是个特殊的节点所有有个特殊的text属性
  9. }
  10.   document.body.appendChild(script);   /*兼容IE*/
  11. }

动态加载样式：

  1. // 动态记载样式
  2. function loadStyle(){
  3.   var style=document.createElement("style");
  4.   style.type="text/css";  //参考网页上的style样式，他怎么写你怎么写
  5.   style.href="style.css";
  6. try{
  7.    style .appendChild(document.createTextNode("//style code"));
  8. }catch(ex){
  9.    style.styleSheet.styleText="//style code";    /*兼容IE*/        //IE也认为style节点是个特殊的节点所有有个特殊的styleSheet.styleText属性 - -
  10. }
  11.  
  12.  var head=document.getElementByTagName("head")[0];
  13.   head.appchild(link);
  14. }

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. Python提升“技术逼格”的6个方法

    1 列表生成式和生成器 from numpy import randoma = random.random(10000) lst = []for i in a: lst.append(i * i) # ...

  2. Spring Boot 设置项目名后静态文件相对路径问题

    出现问题的原因 server.servlet.context-path=testDemospring.mvc.static-path-pattern=/static/**定义项目名和静态资源路径后发现 ...

  3. 针对base64编码和URIEncode的一点研究

    Base64编码的作用 将任意的二进制比特串编码成由ASCii码中的64个可显示字符组成的字符串. 为什么需要base64编码? 所有的文件,本质上都是0.1组成的比特串,文本文件.二进制文件的区别只 ...

  4. 可编程实验板EPM1270T144C5使用说明

  5. [认证 & 授权] 3. 基于OAuth2的认证（译）

    OAuth 2.0 规范定义了一个授权(delegation)协议,对于使用Web的应用程序和API在网络上传递授权决策非常有用.OAuth被用在各钟各样的应用程序中,包括提供用户认证的机制.这导致许 ...

  6. C#中类的实例化过程

    创建某个类型的第一个实例时,所进行的操作顺序为:1.静态变量设置为02.执行静态变量初始化器3.执行基类的静态构造函数4.执行静态构造函数5.实例变量设置为06.执行衯变量初始化器7.执行基类中合适的 ...

  7. Vultr主机绑定域名

    1.在腾讯云上注册域名 然后,域名实名认证 2.Vultr主机购买(看我之前写的:手把手教你如何自己搭梯子) 然后会获取到一个服务器IP地址 3.绑定域名与IP 点解,解析后会弹出让你输入IP地址,此 ...

  8. 分享几个好看又实用的PPT网站~

    一,优品PPT[http://www.ypppt.com/] 一个有情怀的免费PPT模板下载网站!拥有非常多很精美的PPT模板,分类齐全,我们可以选择自己喜欢的PPT模板下载套用就可以了. 二,扑奔P ...

  9. Android 下载进度对话框 ProgressDialog

    protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV ...

  10. QT在linux下获取网络类型

    开发中遇到这样一个需求,需要判断当前网络的类型(wifi或者4G或者网线),在这里给大家一块分享下: 1.这里有一个linux指令:nmcli(大家自行百度即可) 2.nmcli device sta ...