jQuery捕获超链接事件进行局部刷新

标签: Internet | 发表时间:2012-04-11 05:06 | 作者:Xiaoxia
出处:http://xiaoxia.org

使用Google的UI的时候,在当前页面打开一个超链接,网页会根据需要进行局部刷新,而不是替换整个页面。当用户选择新窗口打开超链接的时候,超链接仍然可以到达预想的页面。

<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(){
            /* 点击事件会在超链接跳转前发生 */
            $("#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://xiaoxia.org">xiaoxia</a></li>
            <li><a href="http://www.ibaiyang.org">ibaiyang</a></li>
            <li><a href="http://www.xiaoxins.com">xiaoxins.com</a></li>
        </ol>
    </div>
    <iframe id="div_view" width="100%"></iframe>
</body>
</html>

这只是我用jQuery做的一个测试,不知道Google是怎么实现的。例如,当点击一个超链接事件之后,页面通过iframe来进行局部刷新。而此时浏览器的地址栏应该会发生变化,这个如何改动呢?

我目前是通过修改 window.location 来使地址发生改变的,但是我只能改变#符号后面的内容吧。如果前面的内容也变了,可能会导致浏览器刷新整个页面?

求赐教!

相关 [jquery 超链接 事件] 推荐:

jQuery捕获超链接事件进行局部刷新

- - Xiaoxia[PG]
使用Google的UI的时候,在当前页面打开一个超链接,网页会根据需要进行局部刷新,而不是替换整个页面. 当用户选择新窗口打开超链接的时候,超链接仍然可以到达预想的页面. /* 点击事件会在超链接跳转前发生 */. 这只是我用jQuery做的一个测试,不知道Google是怎么实现的. 例如,当点击一个超链接事件之后,页面通过iframe来进行局部刷新.

Jquery手动触发事件

- - 博客园_首页
    废话不多说,直接贴代码:.     如果想触发一个id为input的文本框的blur事件,则可以这样写:.     相类似,如果想调用input的click事件,则可以这样写:.

jQuery事件编写进阶

- - 阿里巴巴(中国站)用户体验设计部博客
jQuery 事件编程进阶. 事件委托,是一种优化DOM元素事件绑定的技巧,利用事件冒泡的原理,通过绑定事件到父元素,检查event触发元素的target,最终执行相应的事件函数处理,它的几个好处一般前端开发程序员都知道. 在jQuery中,一般是delegate()方法和.live()方法,但是,如何选择事件委托的方法,或者在什么情况下用.live(),什么情况下用.delegate(),这个值得讲一讲:.

jQuery代码优化:基本事件篇

- - 可咔酷 | 网络杂货铺
jQuery对事件系统的抽象与优化也是它的一大特色. 本文仅从事件系统入手,简要分析一下jQuery为什么提供mouseenter和mouseleave事件,它们与标准的mouseover、mouseout事件有什么区别. 说到事件,就要追溯到网景与微软的“浏览器大战”了. 当时,事件模型还没有标准,两家公司的实现就是事实标准.

jQuery - 中文輸入法與KeyDown/KeyPress事件

- 晓刚 - 黑暗執行緒
最近專案中引用了Telerik ASP.NET擴充元件AutoComplete輸入欄位,測試時發現偶爾會不聽始喚,輸入文字時無法觸發資料查詢,在Javascript Source Code裡反覆追蹤測試,燃燒了可觀的寶貴春青,終於理出頭緒: 問題在中文輸入法!. 過去模糊地知道中文輸入在瀏覽器的鍵盤事件行為上有些特殊,但從未深究,這回算是比較清楚研究其中的差別.

GA小技巧:使用jQuery来方便的布置事件跟踪代码

- - 标点符
Google Analytics的事件跟踪是个神器,基本上你能想到什么他就能帮你做什么. 但是按照Google Analytics的帮助文章中方法去布置可能会让你觉得麻烦. 以下为我使用的小技巧分享给大家. 如果你需要跟踪某几个链接在页面上的点击数. 事先给需要记录的点击链接上添加一个类. <a href=“http://www.domain.com/dir/”  class=”tracklink”>跟踪地址</a>.

10个用来处理键盘事件的JQuery插件和JS类库

- - JavaScript - Web前端 - ITeye博客
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用的快捷键次数可能会相对比较少,但是对于熟 练的专业人员来说,使用键盘可能更加容易并且更加快速,在今天这篇文章中,我们收集了10个jQuery的插件,帮助你创建各种基于键盘事件的web应 用,相信大家会喜欢的.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

JQuery 选择器

- - CSDN博客Web前端推荐文章
} </script> <p onclick="test();">点击我</p>.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习. <p class="demo">点击我</p>.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.