基于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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
javascript 日期常用的方法
Nov 11 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
原生JS生成指定位数的验证码
Oct 28 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 nl2br()格式化输出的详解
2013/06/05 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
js实现左右轮播图
2020/01/09 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
树莓派实现移动拍照
2019/06/22 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
医学专业五年以上个人求职信
2013/12/03 职场文书
解除财产保全担保书
2014/05/20 职场文书
植物生产学专业求职信
2014/08/08 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书