基于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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
详解vue项目打包步骤
Mar 29 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
让人印象深刻的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切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
js left,right,mid函数
2008/06/10 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
java直接调用python脚本的例子
2014/02/16 Python
Python collections模块实例讲解
2014/04/07 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
对python中的logger模块全面讲解
2018/04/28 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
工厂厂长的职责
2013/12/12 职场文书
教师节促销活动方案
2014/02/14 职场文书
交通事故协议书范文
2014/04/16 职场文书
家长学校培训材料
2014/08/20 职场文书
导游词之河北野三坡
2019/12/11 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL