ajax 的前進後退問題 jquery.history

阿新 • • 發佈：2019-01-21

本文的前提是基於後臺的，所以這裡不會考慮seo的問題。同時，基於後臺的管理系統，也不需要被收藏，所以也不會考慮重新整理的這種類似直接敲網址的情況！！！

這裡使用的是html5中的history.state 來解決。

網上已經有了js的開源解決方案pushState。詳見pjax

但是這個方案不適合我的專案（後臺專案），尤其是主要的方法有點不夠用。

我使用的是 jquery.history.js 可以參考這個 history.js

看下面的程式碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml 
">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/jquery.history.js"></script>
</head>
<body>


使用者名稱  
<input id="txtUser" type="text"/> <br/>

使用者id <input id="txtId" type="text"/> <br/>


顯示結果
<div id="divtxtinfo"><input id="txtinfo" type="text"/></div>

<br/>
<a funname="displayinfo" title="wxq" href="javascript:void(0);" class="apjax">提交</a>

<br/>
log:
 
<textarea id="log" style="width:100%;height:400px"></textarea>

</body>
</html>
<script>

      ///隨機數
    function guid() {
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }

        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }
  /// 回撥的方法
    function doCallback(fn, args) {
        fn.apply(this, args);
    }

       ///獲取查詢字串
    function GetQueryString() {
        var result = "";
        var url = location.href;

            if(url.indexOf("?")>0){

                result = url.substring(url.indexOf("?") + 1, url.length);
                if (result != "") {
                    result = result + "&";
                }

            }



        return "?" + result;

    }

    // 用來儲存位址列的引數，第一次頁面載入的時候執行。 用來修改位址列的時候，保留原始的引數
    var globalQuerystr;

    var golbalState = {
        "globalPara": {},// js呼叫方法執行時用的全域性js引數，
        "globalControlValue": {},//js需要修改value的html元件 如文字 類似$(“#xxx”).val()
        "globalControlHtml": {},// js需要修改內部html內容的html元件  類似 $(“#yy”).html()
        "CallbackFunctions": "" // 回撥的js方法 可以自己實現 ，用逗號分隔，一般是一個方法名
    };
    ///全域性變數的問題  globaPara 儲存全域性變數
    ///多個控制元件變化 但是不在一個容器內的問題   陣列的方式   History.pushState({state:1,rand:Math.random(), "globaPara":globaPara,    "valuecontrol":[{"txtuser":"1"},{"txtname":"2"}]   "htmlcontrol":[{"htmltxt":"<b>hello</b>"},{"htmlcheckbox1":""}] },"title","?data=1"
    //控制元件型別的問題  有的儲存值就行 有的儲存html更方便
    (function (window, undefined) {
        globalQuerystr = GetQueryString();
        var
                History = window.History, // Note: We are using a capital H instead of a lower h
                State = History.getState(),
                $log = $('#log');
        console.info("頁面載入完畢");
        History.log('initial:', State.data, State.title, State.url);
        //頁面第一次載入的時候 State沒有屬性
        History.Adapter.bind(window, 'statechange', function () { // Note: We are using statechange instead of popstate
            // Log the State
            var State = History.getState(); // Note: We are using History.getState() instead of event.state
            golbalState = State.data;
            if (golbalState) {
                //修改控制元件的val值
                if (golbalState.globalControlValue) {
                    for (var i = 0; i < golbalState.globalControlValue.length; i++) {

                        $("#" + golbalState.globalControlValue[i].controlid).val(golbalState.globalControlValue[i].controlvalue);

                    }

                }

                //修改全域性變數
                if (golbalState.globalPara) {
                    for (var i = 0; i < golbalState.globalPara.length; i++) {
                        eval("" + golbalState.globalPara[i].globalname + " =" + golbalState.globalPara[i].globalvalue + ";");
                    }

                }
                //修改控制元件的html
                if (golbalState.globalControlHtml) {
                    for (var i = 0; i < golbalState.globalControlHtml.length; i++) {

                        $("#" + golbalState.globalControlHtml[i].controlid).html(golbalState.globalControlHtml[i].controlhtml);

                    }

                }
                //執行恢復引數後要執行的函式
                if (golbalState.CallbackFunctions != "") {
                    doCallback(eval("" + golbalState.CallbackFunctions), null);
                }
                //清空函式
                golbalState.CallbackFunctions = "";

            }


            History.log('statechange:', State.data, State.title, State.url);

        });

    })(window);


    function displayinfo() {
        console.info("index:" + History.getCurrentIndex);

         //ajax方法，從伺服器獲取資料
        $("#txtinfo").val("我愛" + $("#txtUser").val() + $("#txtId").val());
    }


    $(function () {
        $(".apjax").on("click", function () {
            golbalState.globalControlValue = [{"controlid": "txtUser", "controlvalue": $("#txtUser").val()}];

            golbalState.CallbackFunctions = $(this).attr("funname");
            History.pushState(golbalState, $(this).attr("title"), globalQuerystr + "rnd=" + guid());
        });

    })

</script>

一先引用jquery 和history.js 的js

二

History.Adapter.bind(window, 'statechange', function () {  表示在點選後退 前進或history的js方法時，監控變化。當變化時執行自定義的方法。

History.pushState 有三個引數 state title 自定義的地址查詢引數。 該方法往歷史記錄裡新增資料，修改位址列

 History.getState()  獲取當前地址的state引數

三 流程

1 首先獲取位址列的引數並儲存

2 繫結包含apjax類的標記的click方法， 標記可以任意，可以是div a連結 按鈕等

  當點選的時候，儲存執行ajax方法前的狀態，儲存到golbalState ，其中回撥的方法從標記的funname屬性中調取，title的值從標記的title屬性獲取，

 “globalPara":  "globalControlValue": "globalControlHtml  最好在ajax的方法中賦值，如displayinfo

3 History.pushState 新增到歷史記錄，並修改位址列

4 當後退的時候，執行History.Adapter.bind中的方法，先獲取state引數

5 把之前 js修改過的變數修改回原來的值  ，把之前修改的html元件的value的值改回原來的值，把修改過的html元件中的html內容恢復為原來的值，

6 重新執行原來的執行過的方法， 即CallbackFunctions中儲存的方法。

以上程式碼只是簡單演示，不保證沒有錯誤。 原理基本就是這個。

ajax 的前進後退問題 jquery.history

本文的前提是基於後臺的，所以這裡不會考慮seo的問題。同時，基於後臺的管理系統，也不需要被收藏，所以也不會考慮重新整理的這種類似直接敲網址的情況！！！這裡使用的是html5中的history.state 來解決。網上已經有了js的開源解決方案pushState。詳見p

Jquery禁止瀏覽器的前進後退

jQuery(document).ready(function () { if (window.history && window.history.pushState) { $(window).on('p

h5 history api實現無重新整理前進後退

history.pushState(data, title [, url])：往歷史記錄堆疊頂部新增一條記錄；data會在onpopstate事件觸發時作為引數傳遞過去；title為頁面標題，當前

AJAX的重新整理和前進後退問題解決

使用AJAX開發分頁功能的時候，使用者跳轉到第5頁，但是重新整理以後又顯示第一頁了，能不能重新整理後還顯示第5頁？還有能不能用瀏覽器的前進後退按鈕來瀏覽AJAX歷次的變化。因為Javascript對dom的操作是不持久化的，重新整理後就恢復原狀，而且也不儲存歷史記錄，也就無

使用pjax處理ajax的前進後退歷史

什麼是pjax? 現在很多網站( facebook, twitter)都支援這樣的一種瀏覽方式，當你點選一個站內的連結的時候，不是做頁面跳轉，而是隻是站內頁面重新整理。這樣的使用者體驗，比起整個頁面都閃一下來說，好很多。其中有一個很重要的組成部分，這些網站的ajax重新整理是支援瀏覽器歷史

pushState()、popstate事件配合ajax實現瀏覽器前進後退頁面區域性重新整理

最近研究pushState，看了網上的文章還是不怎麼會用，於是自己摸索著理解使用，終於實現區域性重新整理同時前進後退。首先說說pushState()，這個函式將當前的url等資訊加入history堆疊中；當點選瀏覽器的前進後退按鈕時，會觸發popstate事件，所以可

Emacs中的前進後退jump-tree

white family num check borde align right mod ide .title { text-align: center } .todo { font-family: monospace; color: red } .done { color

Android 自制瀏覽器二前進後退返回主頁退出

eve ear == his sch ssa tex tid ica 這一次我對網頁的瀏覽添加前進後退，退出，返回主頁的功能。上代碼， public class MainActivity extends Activity implements View.OnClickLis

監控瀏覽器的前進後退---window.onpopstate事件

spa false 指定史記 ace 條目 scrip dex 方法有時候,由於業務需求,需要監聽用戶的後退行為,比如禁止用戶後退,比如想在用戶後退是給鏈接加上參數,這該怎麽辦呢?window對象的popstate事件就派上用場了每當處於激活狀態的歷史記錄條目發生變化

JS原生ajax請求和JQuery提供的 Ajax請求

原生js實現Ajax方法： var Ajax={ get: function(url, fn) { // XMLHttpRequest物件用於在後臺與伺服器交換資料 var xhr = new XMLHttpRequest();

js前進後退後代碼

Js中的前進後退程式碼跟瀏覽器的很像瀏覽器前進程式碼使用window.history();=history.go(1); 然而js使用的history.forward();=history.go(1); 1是前進 -1是後退 1的意思是一頁的意思也可以當成前進一次或者後退一次前進: his

【Ajax】之jQuery中的Ajax

Ajax 1.jQuery中的Ajax load()方法非同步請求的地址非同步請求的資料非同步請求成功後的回撥函式返回值伺服器端的響應結果 <body> <button>按鈕</button> <script src="js

vue路由前進後退動畫

vue-route-transition vue router 切換動畫特性模擬前進後退動畫基於css3流暢動畫基於sessionStorage，頁面重新整理不影響路由記錄路由懶載入，返回可記錄滾動條位置前進後退的判斷與路由路徑規則無關支援任意基於Vue

原生ajax請求和jQuery的ajax請求

原生ajax請求 var name = document.getElementById('user'); var pwd= document.getElementById('pwd'); var btn= document.getElementById('btn'); btn.oncl

08-棧：如何實現瀏覽器的前進後退功能

瀏覽器的前進、後退功能，我想你肯定很熟悉吧？當你依次訪問完一串頁面 a-b-c 之後，點選瀏覽器的後退按鈕，就可以檢視之前瀏覽過的頁面 b 和 a。當你後退到頁面 a，點選前進按鈕，就可以重新檢視頁面 b 和 c。但是，如果你後退到頁面 b 後，點選了新的頁面

selenium 谷歌瀏覽器的登入與退出；前進後退；重新整理；以及視窗的調節；獲取url

package com.ChaptDemo01; import org.openqa.selenium.Dimension; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.Ch

Ajax（使用 jQuery，php）非同步上傳圖片（二進位制流）儲存到新浪雲平臺storage

這兩天實現了一個釋出圖片的功能，可謂是一波三折，bug不斷啊，趁剛搞定，趕緊把過程寫下來，順便把程式碼傳過來。記錄了圖片在本地的儲存和將本地的圖片以二進位制流提交到後臺php檔案在html檔案中的操作自然就是在表單form元素中新增屬性 enctype="multi

Ajax && Jquery&&百度搜索提示&&JQuery實現省市聯動

&nb

IOS下的微信H5頁面的底部前進後退橫欄的適配問題

Question：最近做一個在微信和支付寶內建瀏覽器中執行的移動web介面，前幾個月ios微信更新之後，微信將後退的按鈕移至了底部橫欄，遮擋住了原先底部的操作按鈕。由於之前的頁面設計是整屏顯示禁止觸控滾動效果的，就想著是不是可以隱藏微信內建的底部橫欄。 Answer： 1

Vue-router結合transition實現app前進後退動畫切換效果

一丶首先配置路由並且修改路由配置路由配置就不講了重點，給VueRoute新增一個goBack方法，用於記錄路由的前進後退狀態 this.isBack = true VueRouter.prototype.goBack = function () { 　　this

ajax 的前進 後退 問題 jquery.history

本文的前提是基於後臺的，所以這裡不會考慮seo的問題。同時，基於後臺的管理系統，也不需要被收藏，所以也不會考慮重新整理的這種類似直接敲網址的情況！！！

相關推薦

ajax 的前進後退問題 jquery.history