基于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的颜色选择插件实例代码
Oct 02 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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脚本数据库功能详解(上)
2006/10/09 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
JavaScript 特殊字符
2007/04/05 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python中常用的九种预处理方法分享
2016/09/11 Python
python ddt实现数据驱动
2018/03/14 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
国外平面设计第一市场:99designs
2016/10/25 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
银行实习生的自我评价
2013/12/09 职场文书
工作求职自荐信
2014/06/13 职场文书
场地使用证明模板
2014/10/25 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis