URL地址中的#符号使用说明


Posted in Javascript onFebruary 12, 2011

一般我们想让一个a标签点击后执行javascript代码,有以下几种写法:
方式一:<a href="#" onclick="alert(1);">点击一</a>
这种方式的缺点就是点击后会在地址栏的URL后面加#号,同时把页面移动到顶部,一般不建议使用。
方式二:<a href="javascript:void(0);" onclick="alert(1);">点击一</a>
这种方式避免了方式一的缺点,点击后对页面没有任何影响。但是有一个致命的缺点,就是在IE6下不能执行form对象的submit()方法,也不能执行跳转语句,比如
<a href="javascript:void(0);" onclick="document.forms[0].submit();">点击一</a>
<a href="javascript:void(0);" onclick="window.location.href='http://www.google.com';">点击一</a>
在IE6下就无效,换成href=”#”就能在IE6下正常执行。

方式三:<a href="###" onclick="alert(1);">点击一</a>
点击后虽然会在地址栏的URL后面加三个#号,但是不会影响滚动条,同时在IE6下也能执行form对象的submit()方法与跳转语句,算是一个比较折中的方法。

结论:我个人认为如果执行的javascript方法中需要提交表单、跳转页面,则用方式三,其它情况都用方式二。

另:这又附带引出另一个问题,一般重新加载当前页面用如下的javascript代码:
window.location.href = window.location.href;
但是当URL地址中含有#时,上述代码无效,于是需要用如下代码:
window.location.href = window.location.href.split('#')[0];
将URL地址以#符号分割开,取第一部分即可。

在很多情况下/index.htm#desc,后面的desc可能就是参数,不容易的参数显示不同的内容,不是简单锚点,而是ajax读取内容。

Javascript 相关文章推荐
json的前台操作和后台操作实现代码
Jan 20 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 #Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 #Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 #Javascript
在vs2010中调试javascript代码方法
Feb 11 #Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 #Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 #Javascript
juqery 学习之五 文档处理 插入
Feb 11 #Javascript
You might like
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
Javascript Object.extend
2010/05/18 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
如何使用angularJs
2017/05/08 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
Python验证码识别的方法
2015/07/10 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
python实现石头剪刀布小游戏
2021/01/20 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python单例设计模式实现解析
2020/01/07 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
教师开学感言
2014/02/14 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
个人整改措施书面材料
2014/10/24 职场文书
营业员岗位职责
2015/02/11 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL