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 相关文章推荐
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
vue中的使用token的方法示例
Mar 10 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编写的导航条程序
2006/10/09 PHP
PHP学习笔记之二
2011/01/17 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
python爬虫的工作原理
2017/03/05 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
学习python的前途 python挣钱
2019/02/27 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
学生会主席竞聘书
2014/03/31 职场文书
买卖协议书范本
2014/04/21 职场文书
三行辞职书范文
2015/02/26 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
nginx请求限制配置方法
2021/07/09 Servers
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS