使用 pjax 實現無刷新切換頁面

時間 2019-11-24

標籤使用 pjax 實現刷新切換頁面简体版

原文原文鏈接

1、目的

1.當打開連接的時候，頁面是淡入顯示，而且頁面頂部會顯示加載進度條，頁面顯示完成時，進度條加載滿而且消失。css

2.點擊頁面上的 a 標籤時，顯示加載進度條，而且當前頁面淡出消失，當前頁面淡出消失後，目標頁面則淡入顯示，當頁面顯示完成時，進度條加載滿而且消失。html

2、使用的資源

1.jquery.pjax.js 點擊直接進入 github 下載，上面帶有英文的文檔。jquery

百度搜索到的一箇中文文檔：http://www.uedsc.com/jquery-pjax-js.htmlgit

2.jquery 的版本的話，這裏使用的是 jquery-1.12.0.min.js github

3.nprogress.js 進度條插件數組

官網地址：http://ricostacruz.com/nprogress/app

　　github ：https://github.com/rstacruz/nprogress函數

3、說明

不知道是什麼緣由，我根據文檔上的來寫可是老是沒有效果，百度了好久也沒個明確結果，不過仍是找到了方法，大概就是初始化定義的數據不夠完整。this

如今給出一個我這裏可使用的代碼：url

$(document).pjax('a[target!=_blank]', '#container', { fragment: '#main', timeout: 8000 });

$(這裏是要響應 pjax 事件的元素的容器).pjax()函數說明：

1.第一個參數是要響應 pjax 的元素。

這裏表示要捕獲當前頁面中，全部不是新窗口打開的 a 連接。

2.第二個參數是當前頁面要替換成新頁面的元素的索引器（如：Id, class 等）。

3.第三個參數是一個數組，參數看文檔。

3.1.fragment 參數表示，跳轉後的頁面的哪一個容器的內容替換掉當前頁面。

3.2.timeout 表示過時時間，即，若是使用 pjax 加載響應超時的話，則使用默認的跳轉方法。

示例：

1.如今有兩個頁面。
2.當前打開的頁面 A 中，在 body 元素下有一個 div，它的 Id 是「pjax-container」。
3.如今目的是想要無刷新的跳轉到 B 頁面。
3.1.因爲已經在 A 頁面定義了 pjax 的初始化信息：$(document).pjax('a[target!=_blank]', '#pjax-container', { fragment: '#main', timeout: 8000 });。
表示，將 B 頁面中，Id 是「main」的元素替換掉 A 頁面中 Id 是「pjax-container」的元素。
3.2.在 A 頁面增長 Id 是「pjax-container」的元素，並將須要替換掉的內容放到該元素裏。
3.3.在 B 頁面增長 Id 是「main」的元素，一樣將切換後的內容放到該元素裏。
4.完成。
補充說明：關於 JS 失效的問題，該功能不會引發 JS 失效！！！子頁面若是包含 JS 操做，則必須將要用到的 JS 引用也要放到 fragment 參數標記的容器當中纔可使用。

4、源碼

1.基本頁面元素

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
    <link href="~/Content/Scripts/Nprogress/nprogress.css" rel="stylesheet" />
    <link href="~/Content/Css/base.css" rel="stylesheet" />
    <script src="~/Content/Scripts/JQuery/jquery-1.12.0.min.js"></script>
    <script src="~/Content/Scripts/Nprogress/nprogress.js"></script>
    <script src="~/Content/Scripts/JQuery/Pjax/jquery.pjax.js"></script>
<body>
    <div id="container">
        ...頁面內容...
        <script src="~/Content/Scripts/Application/init.js"></script>
    </div>
    <script src="~/Content/Scripts/Application/base.js"></script>
</body>
</html>

這是一個模板頁

「container」容器就是當前頁面要替換成新頁面的元素。

2.base.css

#container {
    display: none;
}

由於須要淡入淡出效果，因此初始默認讓它們不顯示。

3.base.js

3.1.當用戶經過 URL 直接訪問頁面的時候（即：不是經過站內的 pjax 進行訪問時），也要顯示進度條並淡入顯示頁面內容，因此要加入如下代碼

//打開頁面時加載進度條。
NProgress.start();
window.onload = function () {
    NProgress.done();
    $("#container").fadeIn();
}

3.2.綁定 pjax 事件

/**
* 捕獲 a 事件，當點擊後要在 300 毫秒之後纔會跳轉。
*/
$(document).on('click', 'a[target!=_blank]', function () {
    $("#container").fadeOut();
    NProgress.start();
    var url = $(this).attr("href");
    setTimeout(function () {
        $.pjax({ url: url, container: containerId, fragment: "#container", timeout: 8000 });
    }, 300);

    return false;
});


$(document).on('pjax:complete', function () {
    //加載進度條完成。
    NProgress.done();
    $("#container").fadeIn();
});

3.2.1.在 jquery 裏，須要綁定動態生成的內容的事件，須要使用 $(document).on 來進行事件綁定。

3.2.2.根據文檔和源碼，能夠知道，實際加載頁面是使用 $.pjax(...) 函數來進行的。

因此，這裏不會使用$(document).pjax(...) 函數來綁定。

3.2.3.這裏捕獲了全部 a 標籤的點擊事件，啓動加載進度條並將當前頁面內容進行淡出操做，而且在 300 毫秒之後執行 pjax 加載目標頁面內容，該函數返回 false，則表示禁用默認的跳轉。

3.2.4.當 pajx 處理完成後，進度條加載完成並淡入顯示頁面內容。

4.init.js

/** * 捕獲 a 事件，當點擊後要在 300 毫秒之後纔會跳轉。 */ $("a").click(function (event) { $("#container").fadeOut(); NProgress.start(); var url = $(this).attr("href"); setTimeout(function () { $.pjax({ url: url, container: '#container', fragment: '#container', timeout: 8000 }); }, 300); return false; }); $(document).on('pjax:complete', function () { //加載進度條完成。
 NProgress.done(); $("#container").fadeIn(); });

根據文檔和源碼，能夠知道，實際加載頁面是使用 $.pjax(...) 函數來進行的。

因此，這裏不會使用$(document).pjax(...) 函數來綁定。（實際上是不知道怎麼使用它來進行點擊後等 N 秒才能執行跳轉操做，因此只能放棄這個函數，本身手動實現了）

$("a").click 函數是捕獲全部 a 標籤的點擊事件，啓動加載進度條並將當前頁面內容進行淡出操做，而且在 300 毫秒之後執行 pjax 加載目標頁面內容，該函數返回 false，則表示禁用默認的跳轉。

-----------------------------------------------我是分隔線---------------------------------------------------

到這裏就完成了，只要將具體的頁面內容放到「container」容器裏就能夠了，也就是將「...頁面內容...」替換成具體的內容。

-----------------------------------------------我是分隔線---------------------------------------------------

補充：在使用 jquery.fadeIn() 函數來進行淡入操做的時候，當快速點擊 a 標籤好幾回的時候（淡入操做還在進行中的時候），頁面就會慢慢加載好幾回（點擊多少次就顯示多少次），用戶體驗很是的很差。

這時只要在前面加上.stop(true, true) 就能夠了。

示例：

$("#container").stop(true,true).fadeIn();

-----------------------------------------------下面是完整代碼---------------------------------------------------

base.js

var containerId = '#container';

//打開頁面時加載進度條。
NProgress.start();
window.onload = function () {
    NProgress.done();
    $(containerId).stop(true,true).fadeIn();
}

/**
* 捕獲 a 事件，當點擊後要在 300 毫秒之後纔會跳轉。
*/
$(document).on('click', 'a[target!=_blank][data-pjax!=false]', function () {
    $(containerId).fadeOut();
    NProgress.start();
    var url = $(this).attr("href");
    setTimeout(function () {
        $.pjax({ url: url, container: containerId, fragment: containerId, timeout: 8000 });
    }, 300);

    return false;
});


$(document).on('pjax:complete', function () {
    //加載進度條完成。
    NProgress.done();
    $(containerId).stop(true,true).fadeIn();
});

base.css

#container {
    display: none;
}

html

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="/static/js/nprogress/nprogress.css" rel="stylesheet"/>
    <link href="/static/css/base.css" rel="stylesheet"/>
    <script src="/static/js/jquery/jquery-2.2.0.min.js"></script>
    <script src="/static/js/jquery/pjax/jquery.pjax.js"></script>
    <script src="/static/js/nprogress/nprogress.js"></script>
</head>
<body>
<div id="container">
    我是內容
</div>
<script src="/static/js/application/base.js"></script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。