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

阿新 • • 發佈：2018-12-31

history.pushState(data, title [, url])：往歷史記錄堆疊頂部新增一條記錄；data會在onpopstate事件觸發時作為引數傳遞過去；title為頁面標題，當前所有瀏覽器都會忽略此引數；url為頁面地址，可選，預設為當前頁地址。
history.replaceState(data, title [, url]) ：更改當前的歷史記錄，引數同上。
history.state：獲取歷史棧中最頂端的state資料（即history.pushState中的第一個引數），不同瀏覽器的讀寫許可權不一樣。
popstate事件：當用戶單擊瀏覽器的後退或者前進按鈕（或者呼叫history.go，history.back，history.forward方法也會觸發popstate事件。呼叫history.pushState()或者history.replaceState()不會觸發popstate事件，但改變url中的hash值會觸發popstate事件）時觸發該事件。在事件處理函式中讀取觸發事件的事件物件的state屬性值，該屬性值即為執行pushState方法時所使用的第一個引數值，該state與history.state是相同的，而不是歷史棧中被丟擲的state物件。
到目前為止，IE10，firefox4以上的版本，Chrome8以上的版本，Safari5，Opera11以上的版本瀏覽器支援HTML5中的History API。

判斷是否支援h5 history api：
if (‘pushState’ in history) { … };

一個小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="12.html?color=green">green</a><br/>
<a href="12.html?color=yellow" 
>yellow</a><br/>
<a href="12.html?color=blue">blue</a>
<div style="height: 100px;"></div>
<script>
    history.replaceState({
        color: 'red'
    }, '紅色',"?color=red");//設定初始記錄

    setBackgroundColor("red"); 

    window.onpopstate = function (event) {
        setBackgroundColor(event.state.color);
    };//url改變觸發onpopstate事件 


    var aArr = document.getElementsByTagName('a');
    for(var i = 0, num = aArr.length; i < num; i++){
        aArr[i].onclick = (function (i) {
            return function (event) {
                var query = this.href.split("?")[1];
                var color = query.split("=")[1];
                event.preventDefault();
                if (history.state.color !== color) {
                setBackgroundColor(color);
                history.pushState({
                        color: color
                    }, color ,location.href.split("?")[0] + "?" + query);   
                }
            }
        })(i)
    }
    function setBackgroundColor(color) {
        document.getElementsByTagName('div')[0].style.backgroundColor = color;
    }

</script>
</body>
</html>

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

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

History配合Ajax實現無重新整理頁面跳轉

一些網站頭尾內容都是一樣的，重新整理總顯得浪費。從體驗上講，點選導航，右側Ajax區域性重新整理是更優的策略。 Ajax區域性重新整理小菜，稍有經驗都能輕鬆應對。現在如果提出如下需求：每次ajax重新整理就如果頁面重新整理一樣，可以後退檢視之前內容，怎麼破？

jQuery實現無重新整理切換主題面板功能

主題面板切換功能在很多網站和系統中應用，使用者可以根據此功能設定自己喜歡的主題顏色風格，增強了使用者體驗。本文將圍繞如何使用jQuery實現點選無重新整理切換主題面板功能。檢視演示DEMO：https://www.helloweba.net/demo/style-switch/ 實現該功能的原理就是通過

tp5+ajax+jq實現無重新整理分頁

tp5框架裡面自帶有panigate()+rende()的方法可以超簡單的實現分頁，但是就是看著一直要重新整理很不爽，所以找了網上的好多程式碼，終於找到了一個邏輯簡單的無重新整理分頁，以下是我更改適合之後實現的效果程式碼裡面有詳細註釋了，就不多說了，說明一下分頁查詢的原

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

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

spring mvc + ajax實現無重新整理下載檔案

JQuery的ajax函式的返回型別只有xml、text、json、html等型別，沒有“流”型別，所以我們要實現ajax下載，不能夠使用相應的ajax函式進行檔案下載。但可以用js生成一個form，用這個form提交引數，並返回“流”型別的資料。在實現過程中，

ASP.NET+Ajax+JQuey+Json資料+儲存過程實現無重新整理分頁

<script src="../Jquery/jquery-1.6.2.min.js" type="text/javascript">&l

PHP＋AJAX實現無重新整理註冊（帶使用者名稱實時檢測）程式碼

很多時候，我們在網上註冊個人資訊，在提交完頁面後，總得等待頁面重新整理來告訴我們註冊是否成功，遇到網路差的時候，如果註冊了一大串的東西，在經過漫長的等待頁面重新整理後，得到的確是“您的使用者名稱已被使用”或XXXXXXX不合法，我想大家的心情一定特別不爽，今天就介紹個AJA

form+iframe實現無重新整理上傳檔案

原理：利用form的target屬性，將form的action在iframe中開啟，並接收返回結果，實現仿ajax的頁面無重新整理檔案上傳。正是action在iframe中開啟，所以，頁面才會無重

PHP + JavaScript + Ajax 實現無重新整理頁面載入效果

今天這個實驗的思路就是實現一個無重新整理的頁面載入效果。具體的思路是使用PHP開發後臺，為前臺準備資料，然後使用Ajax技術作為資料的搬運工，將資料從伺服器端拉取到前端，最後使用JavaScript技術將獲取到的資料加工，並顯示在頁面上。資料來源工

jquery+ajax+servlet實現無重新整理圖片上傳

需要藉助ajaxfileupload.js來實現ajax圖片上傳功能。 html部分： <body> <input id="img" type="file" name="img">//id和name屬性必須都有且同名。。。 <input type="but

javascript專案實戰---ajax實現無重新整理分頁

<?php class Pagination { private $total; //資料表中總記錄數 private $listRows; //每頁顯示行數 private $limit; //mysql 資料庫的limit private $uri; //分頁

asp.net Mvc4 使用ajax結合分頁外掛實現無重新整理分頁

本文為在mvc4中使用ajax實現無重新整理分頁demo，記錄一下。解決方案思想：頁面資料的初始載入和按頁載入都是通過ajax來進行，頁面分頁連結點選後利用ajax技術傳送當前頁碼到後端控制器，後端控制器根據當前頁碼和設定的pageSize從資料庫中取出對應頁的資料。

使用Ajax和JSP實現無重新整理的登入頁面

JSP頁面程式碼： $(document).ready(function () { $("button").click(function () { $.post("/untitled/Servlet"

AjaxUpLoad.js實現無重新整理檔案上傳

string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + no

Echats結合Ajax實現無重新整理實時投票

第一步：前臺頁面(使用Ajax獲取資料初始化顯示投票現狀並實時更新顯示)：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

Jquery實現無重新整理評論

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

window.history API 實現禁止瀏覽器回退到上一頁

window.onload = function () { console.log('頁面載入'); // 初始化 const regex = /\/\w+\./; const pageName = window.locat

jquery學習筆記-jquery實現無重新整理聯動

以前做聯動使用asp.net ajax控制元件做的，使用了webservice感覺挺麻煩。發現jquery很方便。首先在頁面引入jquery.js。文字描述太麻煩了。。直接貼關鍵程式碼吧。 <script language="javascript"> $(

iframe實現無重新整理上傳下載

最近我維護的網站在稽核時加了個上傳下載的功能，能上傳多個檔案（檔案很小、不超過3個、上傳時可以多選、且要有上傳進度），下載時有選擇的下載。頁面是用aspx做的，微軟自帶的只有單檔案上傳，於是乎想到flash。找了三個現成的，測試發現一個不相容IE9，另兩個都

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

相關推薦