zoukankan      html  css  js  c++  java
  • JS学习之动态加载script和style样式

    工作已经一年多了,但是现在又开始学习js的一些基础知识,发现动态加载js脚本和动态加载js样式,Ie和其他浏览器加载的不同,需要做一些必要的兼容工作

    我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点"。我们都知道一个基本的网页格式是
    <!DOCTYPE />
    <head></head>
    <body><body />
    这些是最基本的形态,但是其实它省略了最外面的一个标签<document>.
    <document>
    <!DOCTYPE />
    <head></head>
    <body><body />
    </document>
    这其实才是它的本来面目(默认吧document标签给省略了)。是不是感觉有什么不一样的呢?这下子就好理解的多了。document.body 或者docment.head,无论你的什么操作只要是有关于这个<document>标签的你跟可以利用document获得,因为它是根。在看一下你所写的网页文档,记住任何存在<document>标签里面都是可以获得的,记得么 在节点类型中有document这种类型,所有的节点其实都是已经被分类好的,知识它们的nodeType和nodeName不一样而已(可以查一下资料"节点类型")。有点跑题,现在来看一下具体的代码(省略版的)如下:

    //动态加载脚本
    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);
    }

    这里我们首先尝试标准的DOM文本节点的方法,因为除了IE外会抛出错误,所有的浏览器都支持这种方法,如果代码发生错误就会发生错误,那么说明是IE,于是就必须使用Text属性。

    很简单的代码清单,概述就是创建一个标签,设置一下属性,添加一下内容,放到该放的位置上。程序员不好做,但我选择了它就不要后悔。为自己,请叫我程序员

    参考书籍:《JavaScript高级程序设计》

  • 相关阅读:
    【攻防世界】beginners-luck
    Virtual Judge 20210601 日常训练 AB题解
    20210419 Vj 组队练习赛 CDIHEB 题解
    20210415 日常组队练习赛 EGJACI题解
    20210412 组队赛 BCEFGH题解
    20210408 Codeforces Round #372 (Div. 2) ABC 题解
    Codeforces Round #280 (Div. 2) BC题解
    QLU 日常训练 20210311 (Codeforces )
    QLU ACM-ICPC 2020 Training Contest 12 @2014 ICPC Anshan [Cloned]
    Virtual Judge 20210219 日常赛
  • 原文地址:https://www.cnblogs.com/daniel-lij/p/7098955.html
Copyright © 2011-2022 走看看