zoukankan      html  css  js  c++  java
  • JS动态加载JS文件与CSS文件

    原理解析:

    第一步:使用dom创建<script type="text/javascript"> 或者 <link>标签,并给他们附加属性,如type等

    第二步:使用appendChild方法把标签绑定到另一个标签,一般是绑到<head>.

    应用:

    1、提高代码的复用,减 少代码量;

    2、添加一个javascript控制器和 session可以实现动态改变页面样式;

    3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要性

    DEMO 一 HTML页面  jsforjscss.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="loadjscssfile.js"></script>
    <title>无标题文档</title>
    </head>
    <body>
    </body>
    </html>

     二 动态加载js文件的程序   loadjscssfile.js

    // JavaScript Document
    function loadjscssfile(filename, filetype) {
    if (filetype == "js") {
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename);
    } else if (filetype == "css") {
    var fileref = document.createElement('link');
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);
    }
    if (typeof fileref != "undefined") {
    document.getElementsByTagName("head")[0].appendChild(fileref);
    }
    }
    loadjscssfile("do.js", "js");
    loadjscssfile("test.css", "css");

     三 被加载的 js文件:

    do.alert("this is do");

    四 被加载的 css文件:test.css (css文件中还可以用@import url("menu.css"); 引进其他css文件)

    @charset "utf-8";
    @import url("menu.css");
    @import url("../gundong.css");
    body{
        background-color:gray;
    }
  • 相关阅读:
    linux 操作命令
    Linux 安装问题
    margin和text-align实现水平居中的区别
    javascript关键字typeof、instanceof、constructor判断类型
    jquery经常用到的代码段
    Ubuntu安装Chrome浏览器及解决启动no-sandbox问题
    github基本使用---从零开始
    Jquery的load加载本地文件出现跨域错误的解决方案
    meta标签中设置以极速模式打开网页
    原生js动态创建文本内容的几种方式
  • 原文地址:https://www.cnblogs.com/asqq/p/3194981.html
Copyright © 2011-2022 走看看