基于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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
jquery 插件学习(六)
Aug 06 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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投票程序源码
2007/03/11 PHP
php mssql 时间格式问题
2009/01/13 PHP
php 获取全局变量的代码
2011/04/21 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
眼镜促销方案
2014/03/15 职场文书
个人存款证明书
2014/10/18 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书