基于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 检测元素是否存在的实例代码
Nov 19 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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
Apache设置虚拟WEB
2006/10/09 PHP
php防注
2007/01/15 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
laravel入门知识点整理
2020/09/15 PHP
javascript读取RSS数据
2007/01/20 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
使用python遍历指定城市的一周气温
2017/03/31 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
python如何判断IP地址合法性
2020/04/05 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
成教自我鉴定
2013/10/27 职场文书
大专学生推荐信范文
2013/11/19 职场文书
公司接待方案
2014/03/08 职场文书
教堂婚礼主持词
2014/03/14 职场文书
高中生操行评语大全
2014/04/25 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
六年级作文之关于梦
2019/10/22 职场文书