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;
    }
  • 相关阅读:
    HTML基础-3
    HTML基础-2
    HTML基础-1
    hdu 1709 The Balance(母函数)
    hdu 2082 找单词(母函数)
    hdu 1085 Holding Bin-Laden Captive!(母函数)
    hdu 1028 Ignatius and the Princess III(母函数)
    hdu 1027 Ignatius and the Princess II(正、逆康托)
    康托展开、康托逆展开原理
    hdu 4288 Coder(单点操作,查询)
  • 原文地址:https://www.cnblogs.com/asqq/p/3194981.html
Copyright © 2011-2022 走看看