基于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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
vue单页应用的内存泄露定位和修复问题小结
Aug 02 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
使用PHP维护文件系统
2006/10/09 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
jquery登录的异步验证操作示例
2019/05/09 jQuery
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
大学生个人推荐信范文
2013/11/25 职场文书
高中打架检讨书
2014/02/13 职场文书
文明村创建实施方案
2014/03/27 职场文书
德育标兵事迹材料
2014/08/24 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
离婚被告代理词
2015/05/23 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技