基于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 图片上传按比例预览插件集合
May 28 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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动态生成JavaScript代码
2009/03/09 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
洗煤厂厂长岗位职责
2014/01/03 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
租赁意向书范本
2014/04/01 职场文书
认错检讨书
2014/10/02 职场文书
学校开学标语
2014/10/06 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
Java异常体系非正常停止和分类
2022/06/14 Java/Android