基于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 相关文章推荐
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
jQuery事件详解
Feb 23 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
Document 对象的常用方法
2009/07/31 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
Python Selenium参数配置方法解析
2020/01/19 Python
python读写文件write和flush的实现方式
2020/02/21 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
支行行长岗位职责
2015/02/15 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript