基于jQuery捕获超链接事件进行局部刷新代码


Posted in Javascript onMay 10, 2012

基于jQuery捕获超链接事件进行局部刷新代码
核心代码:

<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="https://3water.com">3water.com</a></li> 
<li><a href="http://s.3water.com">server</a></li> 
<li><a href="http://sc.3water.com">sc.3water.com</a></li> 
</ol> 
</div> 
<iframe id="div_view" width="100%"></iframe> 
</body> 
</html>

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

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

Javascript 相关文章推荐
javascript面向对象之二 命名空间
Feb 08 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
详解JavaScript函数对象
Nov 15 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 #Javascript
jQuery 图片切换插件(代码比较少)
May 07 #Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 #Javascript
js查错流程归纳
May 04 #Javascript
iphone safari不支持position fixed的解决方法
May 04 #Javascript
JavaScript之自定义类型
May 04 #Javascript
Javascript 键盘事件的组合使用实现代码
May 04 #Javascript
You might like
php实现事件监听与触发的方法
2014/11/21 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
node.js中的console.error方法使用说明
2014/12/10 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
Bootstrap插件全集
2016/07/18 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
jquery延迟对象解析
2016/10/26 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Python版微信红包分配算法
2015/05/04 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
django celery redis使用具体实践
2019/04/08 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
毕业生自荐书
2013/12/18 职场文书
实习鉴定范文
2013/12/19 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014年工商所工作总结
2014/12/09 职场文书
56句经典英文座右铭
2019/08/09 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js