基于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的操作实现代码
May 06 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 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
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP 无限级分类
2017/05/04 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Python Process多进程实现过程
2019/10/22 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
查询优化的一般准则有哪些
2015/03/08 面试题
简短大学毕业感言
2014/01/18 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
函授生自我鉴定
2014/03/25 职场文书
新年团拜会主持词
2014/04/02 职场文书
消防安全责任书
2014/04/14 职场文书
新入职员工工作总结
2015/10/15 职场文书
通知怎么写?
2019/04/17 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python