在HTML页面中加载js文件和css文件的不二诀要,如何在七个页面使用同七个HTML片段

永利402com官方网站 3
永利402com官方网站

永利402com官方网站,壹.在HTML页面加载js文件的办法:

上壹篇文章中大家应用textarea来模拟AJAX的回到结果,变成了一些误会。

function loadScriptFile(filePath){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = filePath;
    document.head.appendChild(script);
}

此地我们先是用asp.net的Generic
Handler做二个简练的后台来再次出现那一个AJAX进程。

贰.在HTML页面加载css文件的点子:

  1. HTML页面:

     <script type="text/javascript">
         $(function() {
             $("#clickToInsert").click(function() {
                 $.get("service.ashx?file=pages2_1.txt", function(data) {
                     $("#placeholder").html(data);
                 }, "text");
             });
         });
     </script>
     <input type="button" id="clickToInsert" value="Insert HTML" />
     <div id="placeholder">
     </div>
    
function loadCsstFile(filePath){
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = "filePath";
    document.head.appendChild(link);
    //document.getElementsByTagName("head")[0].appendChild(link);
}
  1. service.ashx 后台代码:

     public void ProcessRequest(HttpContext context)
     {
         string filePath = context.Request["file"].ToString();
         string fileContent = String.Empty;
         using (StreamReader sr = new StreamReader(context.Server.MapPath(filePath)))
         {
             fileContent = sr.ReadToEnd();
         }
         context.Response.ContentType = "text/plain";
         context.Response.Write(fileContent);
     }
    
  1. pages2_1.txt 文件:

     <script type="text/javascript">
         $(function() {
             var parent = $("#complex_page_segment");
             $(".previous", parent).click(function() {
                 $(".content", parent).html("Previous Page Content");
             });
             $(".next", parent).click(function() {
                 $(".content", parent).html("Next Page Content");
             });
         });
     </script>
     <div id="complex_page_segment">
         <input type="button" value="Previous Page" class="previous" />
         <input type="button" value="Next Page" class="next" />
         <div class="content">Page Content</div>
     </div>
    

将HTML片段中的JavaScript提取为贰个文本
那也是不出所料就想开的,特别是HTML片段中JavaScript代码相比多的场所下,
领取为三个JS文件,让浏览器扶助缓存不失为一种好点子。

  1. 再也定义pages二_2.txt

     <script type="text/javascript">
         $(function() {
             setup();
         });
     </script>
     <script src="pages2_2.js" type="text/javascript"></script>
     <div id="complex_page_segment">
         <input type="button" value="Previous Page" class="previous" />
         <input type="button" value="Next Page" class="next" />
         <div class="content">Page Content</div>
     </div>
    
  1. pages2_2.js

     function setup() {
         var parent = $("#complex_page_segment");
         $(".previous", parent).click(function() {
             $(".content", parent).html("Previous Page Content");
         });
         $(".next", parent).click(function() {
             $(".content", parent).html("Next Page Content");
         });
     }
    
  1. 运维,居然报错! 

**永利402com官方网站 1

难题浅析**
错误信息是 setup
那么些函数未有概念,可是从Firebug中大家显著看出pages二_二.js的确被加载了。
老大极有望是在 pages2_贰.js 加载事先就调用了 setup 那几个函数。
然而我们的setup 函数调用是献身jQuery的 $(function(){ })
之中的,也正是在页面加载落成才调用的。

事实上以后问题一度很分明了,在AJAX重返页面片段的时候,整个页面是现已加载成功了,也正是DOM
Ready。
为此在页面片段中:

    $(function() {
        setup();
    });

和底下直接调用是等价的:

    setup();

减轻难题
对此那个难题,大家有二种消除办法。

  1. 将表面JS文件在页面中加载,而不是在AJAX重临的HTML片段。

  2. 我们能够通过JavaScript先加载外部JS,再加载纯粹的HTML片段。
    看一下pages2_3.htm的实现:

     <script type="text/javascript">
         $(function() {
             $("#clickToInsert").click(function() {
                 $.getScript("pages2_2.js", function() {
                     $.get("service.ashx?file=pages2_3.txt", function(data) {
                         $("#placeholder").html(data);
                     }, "text");
                 });
             });
         });
     </script>
     <input type="button" id="clickToInsert" value="Insert HTML" />
     <div id="placeholder">
     </div>
    

③.
运用JavaScript在页面上是逐HTC载的本性,将HTML片段中外部JS引用位于最上边

pages2_4.htm:

    <script type="text/javascript">
        $(function() {
            $("#clickToInsert").click(function() {
                $.get("service.ashx?file=pages2_4.txt", function(data) {
                    $("#placeholder").html(data);
                }, "text");
            });
        });
    </script>
    <input type="button" id="clickToInsert" value="Insert HTML" />
    <div id="placeholder">
    </div>

pages2_4.txt:

    <script src="pages2_2.js" type="text/javascript"></script>
    <script type="text/javascript">
        setup();
    </script>
    <div id="complex_page_segment">
        <input type="button" value="Previous Page" class="previous" />
        <input type="button" value="Next Page" class="next" />
        <div class="content">
            Page Content</div>
    </div>

可能你会认为第三种办法不供给,可是一旦你相逢那样的必要,你就知道第二种情势的要紧了。

  • 绝不在各种页面都加载这一个JS文件
  • 调用者不知道三个HTML片段关联哪些JS文件

============================================================
至于JS的相继执行性子
兴许有人对那几个特点并不是很驾驭,小编就由此贰个例子来申明。

    <html>
    <head>
        <title></title>
        <script src="js1.js" type="text/javascript"></script>
        <script src="js2.js" type="text/javascript"></script>
        <script type="text/javascript">
            console.log("after js2:" + new Date().toLocaleTimeString());
        </script>
    </head>
    <body>
    </body>
    </html>

js1.js:

    console.log("start load js1:" + new Date().toLocaleTimeString());
    // 中间是很长很长的一段JavaScript,有12M之多
    console.log("end load js2:" + new Date().toLocaleTimeString());

js2.js:

    console.log("load js2:" + new Date().toLocaleTimeString());

作者们来看下Firebug的记录: 
 
永利402com官方网站 2
 

永利402com官方网站 3

能够见见,纵然js二.js更早的被加载,不过依然js一.js推行完结未来,才起来执行js②.js。

源代码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图