zoukankan      html  css  js  c++  java
  • JavaScript---动态加载script和style样式

    一个网页里面的内容理解为一个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);
    }
  • 相关阅读:
    无刷新跨域上传图片
    php框架-yii
    nginx-url重写
    linux下挂载移动硬盘ntfs格式
    页面有什么隐藏bug:字体,图片
    Oracle、MySql、SQLServer数据分页查询
    转载:Qt之界面实现技巧
    QT常用资料
    MySQL判断字段值来确定是否插入新记录
    WindowsAPI开发常用资料
  • 原文地址:https://www.cnblogs.com/yangzhengier/p/10848961.html
Copyright © 2011-2022 走看看