繼上一篇 使用jquery的load方法設(shè)計(jì)動(dòng)態(tài)加載，并解決被加載頁面JavaScript失效問題 解決了后臺(tái)業(yè)務(wù)系統(tǒng)的部分動(dòng)態(tài)加載問題，然而該框架離正常的用戶體驗(yàn)還存在一些問題，如：瀏覽器的前進(jìn)、后退、刷新等問題。有博友也遇到了同樣的問題，接下來就針對(duì)瀏覽器的前進(jìn)、后退、刷新進(jìn)行用戶體驗(yàn)優(yōu)化。

在解決上述問題時(shí)也進(jìn)行了各種search,但是大部分都是自己實(shí)現(xiàn)的插件，而且插件年久失修，對(duì)于新的jquery支持不佳。也有使用h5新加的history方法來實(shí)現(xiàn)的，由于HTML5的廣泛使用，絕大部分主流瀏覽器已經(jīng)支持h5，若是你還是抓著IE6/7/8不放手的忠實(shí)粉絲，請(qǐng)略過，本文就是使用h5的history方法來實(shí)現(xiàn)的。

而且在上一篇的基礎(chǔ)上，使用jquery的插件的寫法略微封裝了一下，load的原理已經(jīng)在上一篇介紹，這里不再復(fù)贅，這里對(duì)h5的history API介紹一下：

history.pushState(data, title [, url])：往歷史記錄堆棧頂部添加一條記錄；data會(huì)在onpopstate事件觸發(fā)時(shí)作為參數(shù)傳遞過去；title為頁面標(biāo)題，當(dāng)前所有瀏覽器都會(huì)忽略此參數(shù)；url為頁面地址，可選，缺省為當(dāng)前頁地址。

簡(jiǎn)單封裝的插件：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 1 $.extend({ 2     /** 3      *  使用jquery的load方法加載頁面, 
 4      *  根據(jù)url地址加載該頁面中的id為content的內(nèi)容 到 本頁面的ID為content的位置 5      *  url        鏈接URL 6      *  data    鏈接請(qǐng)求參數(shù) 7      */ 8     loadPage: function(url, data) { 9         $.ajaxSetup({cache: false });10         $("#content").load(url+ " #content ", data, function(result){11             //