基于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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
让人印象深刻的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
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
python3字符串输出常见面试题总结
2020/12/01 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
运动会通讯稿50字
2014/01/30 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
预备党员政审材料
2014/02/04 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python