基于jQuery捕獲超鏈接事件進行局部刷新代碼
更新時間:2012年05月10日 00:53:45 作者:
使用Google的UI的時候,在當前頁面打開一個超鏈接,網(wǎng)頁會根據(jù)需要進行局部刷新,而不是替換整個頁面。當用戶選擇新窗口打開超鏈接的時候,超鏈接仍然可以到達預想的頁面

核心代碼:
復制代碼 代碼如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>A Click Event Test</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* 點擊事件會在超鏈接跳轉(zhuǎn)前發(fā)生 */
$("#div_test a").click(function(){
var link = $(this).attr('href');
$('#div_view').attr('src', link);
var href = window.location.href;
window.location.href = href.substr(0, href.indexOf('#')) + '#' + link;
return false;
});
});
</script>
</head>
<body>
<div id="div_test">
<ol>
<li><a href="http://chabaoo.cn">jb51.net</a></li>
<li><a >server</a></li>
<li><a >sc.jb51.net</a></li>
</ol>
</div>
<iframe id="div_view" width="100%"></iframe>
</body>
</html>
這只是我用jQuery做的一個測試,不知道Google是怎么實現(xiàn)的。例如,當點擊一個超鏈接事件之后,頁面通過iframe來進行局部刷新。而此時瀏覽器的地址欄應(yīng)該會發(fā)生變化,這個如何改動呢?
我目前是通過修改 window.location 來使地址發(fā)生改變的,但是我只能改變#符號后面的內(nèi)容吧。如果前面的內(nèi)容也變了,可能會導致瀏覽器刷新整個頁面?
您可能感興趣的文章:
- jQuery ajaxSubmit 實現(xiàn)ajax提交表單局部刷新
- JQuery的Ajax請求實現(xiàn)局部刷新的簡單實例
- 用Jquery.load載入頁面實現(xiàn)局部刷新
- 使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫取出數(shù)據(jù)
- jQuery 定時局部刷新(setInterval)
- 使用jQueryMobile實現(xiàn)滑動翻頁效果的方法
- JQuery插件iScroll實現(xiàn)下拉刷新,滾動翻頁特效
- 通過pjax實現(xiàn)無刷新翻頁(兼容新版jquery)
- 封裝的jquery翻頁滾動(示例代碼)
- 使用jQuery.fn自定義jQuery翻頁插件
- jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路
相關(guān)文章
jquery slibings選取同級其他元素的實現(xiàn)代碼
jquery選取同級其他元素可以使用slibings方法,end方法可以清除之前的鏈式操作,相當于重新開始2013-11-11Jquery動態(tài)添加及刪除頁面節(jié)點元素示例代碼
這篇文章主要介紹了Jquery如何動態(tài)添加及刪除頁面節(jié)點元素,示例代碼如下,需要的朋友不要錯過2014-06-06jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程
jQuery Mobile中的button默認提供了很多用于制作移動Web頁面按鈕的屬性,這里我們來整理一下jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05jQuery的promise與deferred對象在異步回調(diào)中的作用
這篇文章主要介紹了jQuery的promise與deferred對象在異步回調(diào)中的作用,需要的朋友可以參考下2016-05-05