讓瀏覽器支援 jquery ajax load 前進、後退 功能

來源:互聯網
上載者:User

BEGIN;


      一般在做 ajax load 的時候,很多人都不會考慮到需要瀏覽器支援前進後退功能,因為大部分人都不知道可以實現。

      最近遇到這個問題,經過一小段研究,發現github已經有現成的開源工具使用,主要實現原理是利用html的錨點,即<a href="#xxx">,詳情可查看https://github.com/balupton/jquery-history/tree/master


主要demo代碼如下:

html

<ul><li><a href="#ttt">ttttttttttttttt</a></li><li><a href="#aaa">aaaaaaaaaaaaaaa</a></li><li><a href="#bbb">bbbbbbbbbbbbbbb</a></li><li><a href="#eee">eeeeeeeeeeeeeee</a></li><li><a href="#mmm">mmmmmmmmmmmmmmm</a></li></ul><div id="showdiv" style="width: 500px; height: 500px; border: 1px groove #e3e7ea;">default content</div>
js

<script type="text/javascript">$(function() {// 這裡是共用的位置,通過state參數做操作$.History.bind(function(state){$('#showdiv').load('action/'+state+'.html');});// 這裡是對某個連結做特殊操作$.History.bind('bbb',function(state){alert('點擊了 bbb 連結,這是對 bbb 連結特殊處理位置');});});</script>

相關問題:

state 參數:即超連結標籤href="#xxx"中的xxx值。

執行順序:先執行特殊操作,再執行共用操作。


詳細的源碼如下:

csdn資源:http://download.csdn.net/detail/cyzshenzhen/7487091

Git@OSC源碼託管地址:http://git.oschina.net/cyzshenzhen/jquery_history_demo


END;

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.