基于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 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 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输入流php://input介绍
2012/09/18 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
删除重复数据的算法
2006/11/23 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
python plotly画柱状图代码实例
2019/12/13 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
python中pivot()函数基础知识点
2021/01/03 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
学生期末评语大全
2014/04/30 职场文书
2014年教研工作总结
2014/12/06 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android