[前端引用] 利用ajax實現相似php include require 等命令的功能

時間 2019-11-11

標籤前端引用利用 ajax 實現相似 php include require 命令功能欄目 Ajax 简体版

原文原文鏈接

利用ajax實現相似php中的include、require等命令的功能javascript

最新文件下載：
php

https://github.com/myfancy/ajaxIncludecss

建議去這裏閱讀readme-2.0.md。html

後續這裏再也不更新。前端

下面的都是以前寫的，不必讀了。java

-------更新2015.9.28jquery

這纔是真正的jquery插件的寫法。git

分析：假設當前頁面index.hlml 經過ajaxInclude引入了 inc_yd.html。inc_yd.html須要jquery代碼支持。而且是在相應的dom加載完畢後才能執行。github

那麼若是該代碼寫在common.js中，通常調用方法都是這樣寫的:$(document).ready(function(//相關代碼){}); ajax

common.js和ajaxInclude.js都在index.html中引入。

最終結果是不執行的。由於$(document).ready()在index.html的自身的dom加載完成以後，ajaxInclude()方法執行以前就加載了。

第一次想到的解決辦法是：在inc_yd.html中引入相關common.js。這樣看似能夠解決了，可是若是common.js還在index.html中有引入。那麼就會引入兩份common.js接入到頁面。若是common.js中的方法沒有經過js插件的方法書寫，有可能會致使相同的方法執行兩次，好比一個alert事件彈屢次窗，一個數字加按鈕點擊後，加2個數。

第二個方法（如今剛剛想到的一個辦法）就是想inc_yd.html中須要的js直接想到它的頁面上，其餘的地方不在出現。這樣能夠完美解決問題？

第三個想到的辦法是：經過不經過$(document).ready()來調用inc_yd.html的方法，而是經過$(window).load()來調用方法，那麼就會等到整個頁面徹底加載完畢以後纔會觸發該方法。此方法不適合網站開發使用，只適合前端開發使用。後臺開發經過後臺的方法引入了inc_yd.html後應該將該調用方法改成$(document).ready()觸發，否則每次等整個頁面包括圖片下載完成以後在執行，有點太慢了。

總結：

第一個方法不推薦，被引用頁面的js和其餘的js混合在一塊兒致使頁面代碼各類重複執行，各類奇葩bug，

第二個方法實際上是將相應代碼抽出來單獨放置了。

第三個後臺開發還要讓人家修改代碼。

因此推薦第二個方法，直接將js代碼寫入到被引用頁面中，而不是經過<script src="">來引入

若是特殊時刻，能夠經過第三個方法來快速解決問題。

若是以爲很差管理js的話，能夠將對應的方法插件化，而後將調用方法寫到被應用頁面中。

參考hhkx項目

/**
 * Created by 幻想家 on 2015/7/2.
 * ajaxInclude方法。
 * 版本更新：201509230909（採用jquery插件的方式寫）
 * 使用方法：
 <script id="ieAlert" type="text/javascript">
    $('#ieAlert').ajaxInclude('inc_ieAlert.html');
 </script>
 * 更新須知：以前的版本會致使頁面由於load方法，屢次觸發頁面中$(document).ready();致使其內部的方法被屢次觸發，那個帶按鈕的計算價格的
 * 輸入框組件就是例證，此次的更新不知道能不能解決該問題，有待驗證！（猜想仍是解決不了）2015.9.23.9:23
 * add：問題已解決，不知道是這個方法插件化，仍是那個計算價格組件的方法插件化搞好的。
 *
 * 版本：v201509111553
 * 模擬php的include功能，經過ajax load()實現。
 * 注意：只能在網站環境下運行，在文件夾中直接雙擊運行是會報錯的。
 * scriptID:表明當前script節點的id
 * includeFile:表明引入的文件，能夠包括路徑
 * 使用方法：
 * <head>中引入：
 <script type="text/javascript" src="js/jquery.ajaxInlcude.js"></script>
 * 須要的位置寫它：(id能夠自定義，但不能重複哦)
 <script id="CustomIDNotSame" type="text/javascript">
 $(document).ready(
 ajaxInclude('CustomIDNotSame','head.html')
 );
 </script>
 * 代碼能夠更簡單一點：
 <script id="CustomIDNotSame" type="text/javascript">
 $(ajaxInclude('CustomIDNotSame','head.html'));
 </script>
 * 在須要引入的地方，書寫上面的代碼。
 * 一、須要給script節點添加id，這方法時經過id來判斷include到的頁面位置的。
 * 二、一個頁面屢次應用，id必定不要重複。
 * 三、把被引入的html文件稱爲子頁面，主動引入的稱爲母頁面，母頁面的css能夠直接影響到子頁面的dom，
 *    可是母頁面的js是檢測不到子頁面的dom的，因此若是子頁面上須要用js交互功能的話，把相應的js代碼引入或寫入的子頁面的文件中。
 *    子頁面能夠直接寫dom和js，不須要寫css和網頁的<html>和<head>等，只須要寫<body>標籤內部的代碼便可
 *
 */

;

(function($) {
    $.fn.ajaxInclude = function(includeFile) {
        var scriptID = $(this).attr('id');
        //經過js建立外層div，位置是當前script節點前方，因此一個頁面中屢次引用時須要使用不一樣的id
        $(this).before('<div id='+scriptID+'-tempWrap'+'></div>');
        //在建立的div中，經過ajax load()引入指定html文件
        //添加回調函數，處理一些問題並捕捉異常
        $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success") {
                //能夠在這裏刪除有礙觀瞻的自身script節點，表擔憂，不影響函數執行
                $(this).next().remove();
                //沒錯，這就是傳說中的去殼大法！
                $(this).children().unwrap();
            }else if(statusTxt=="error") {
                $(this).html("<h1 style='font-size: 25px'>此處組件加載失敗！</h1>");
                console.log("ajaxInclude.js執行錯誤————"+xhr.status + "：" + xhr.statusText);
            }
        });
    };
})(jQuery);


//;

//function ajaxInclude(scriptID,includeFile){
//    //經過js建立外層div，位置是當前script節點前方，因此一個頁面中屢次引用時須要使用不一樣的id
//    $("#"+scriptID).before('<div id='+scriptID+'-tempWrap'+'></div>');
//    //在建立的div中，經過ajax load()引入指定html文件
//    //添加回調函數，處理一些問題並捕捉異常
//    $("#"+scriptID+'-tempWrap').load(includeFile,function(responseTxt,statusTxt,xhr){
//        if(statusTxt=="success") {
//            //能夠在這裏刪除有礙觀瞻的自身script節點，表擔憂，不影響函數執行
//            $(this).next().remove();
//            //沒錯，這就是傳說中的去殼大法！
//            $(this).children().unwrap();
//        }else if(statusTxt=="error") {
//            $(this).html("<h1 style='font-size: 25px'>此處組件加載失敗！</h1>");
//            alert("Error: " + xhr.status + ": " + xhr.statusText);
//        }
//    });
//}

-------更新2015.7.2

把它插件化了，這樣使用更加方便：

將下面代碼拷貝至新建的js文件中，而後引入頁面便可。推薦命名：jquery.ajaxInclude.js

/**
 * Created by 幻想家 on 2015/7/2.
 * ajaxInclude方法。
 * 模擬php的include功能，經過ajax load()實現。
 * 注意：只能在網站環境下運行，在文件夾中直接雙擊運行是會報錯的。
 * a:表明當前script節點的id
 * b:表明引入的文件，能夠包括路徑
 * 使用方法：
 * <head>中引入：
 * <script src="js/jquery.ajaxInlcude.js" type="text/javascript"></script>
 * 須要的位置寫它：(id能夠自定義，但不能重複哦)
 * <script id="include-header" type="text/javascript">
 *   $(document).ready(
 *     ajaxInclude('include-header','head.html')
 *   );
 * </script>
 * 在須要引入的地方，書寫上面的代碼。
 * 一、須要給script節點添加id，這方法時經過id來判斷include到的頁面位置的。
 * 二、一個頁面屢次應用，id必定不要重複。
 * 三、把被引入的html文件稱爲子頁面，主動引入的稱爲母頁面，母頁面的css能夠直接影響到子頁面的dom，
 *    可是母頁面的js是檢測不到子頁面的dom的，因此若是子頁面上須要用js交互功能的話，把相應的js代碼引入或寫入的子頁面的文件中。
 *    子頁面能夠直接寫dom和js，不須要寫css和網頁的<html>和<head>等，只須要寫<body>標籤內部的代碼便可
 *
 */

;

function ajaxInclude(a,b){
    //經過js建立外層div，位置是當前script節點前方，因此一個頁面中屢次引用時須要使用不一樣的id
    $("#"+a).before('<div id='+a+'-wrap'+'></div>');
    //在建立的div中，經過ajax load()引入指定html文件
    //添加回調函數，處理一些問題並捕捉異常
    $("#"+a+'-wrap').load(b,function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success") {
            //能夠在這裏刪除有礙觀瞻的自身script節點，表擔憂，不影響函數執行
            $(this).next().remove();
            //沒錯，這就是傳說中的去殼大法！
            $(this).children().unwrap();
        }else if(statusTxt=="error") {
            $(this).html("<h1 style='font-size: 50px'>此處組件加載失敗！</h1>");
            alert("Error: " + xhr.status + ": " + xhr.statusText);
        }
    });
}

--------2015.7.2以前

需求介紹

在寫頁面的時候，一個導航可能N頁面要用到，每個頁面都須要複製粘貼一份進去，一旦有改動html代碼的需求就苦逼了，每一個都得改一遍。若是這個需求還不少，反覆改，那簡直就是折磨人啊（雖然這種狀況通常的狀況下遇不到，可是偶總是遇到。）

直接看代碼

    <script id="ajax-header" type="text/javascript">
        //經過js建立外層div，位置是當前script節點前方，因此一個頁面中屢次引用時須要使用不一樣的id
        $("#ajax-header").before('<div id="include-head"></div>');
        //在建立的div中，經過ajax load()引入
        $(document).ready(function(){
            //添加回調函數，處理一些問題並捕捉異常
            $("#include-head").load("head.html",function(responseTxt,statusTxt,xhr){
                if(statusTxt=="success") {
                    //能夠在這裏刪除有礙觀瞻的自身sript節點，表擔憂，不影響函數執行
                    $(this).next().remove();
                    //沒錯，這就是傳說中的去殼大法！
                    $(this).children().unwrap();
                }else if(statusTxt=="error") {
                    $(this).html("<h1 style='font-size: 50px'>此處組件加載失敗！</h1>");
                    alert("Error: " + xhr.status + ": " + xhr.statusText);
                }
            });
        });
    </script>