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 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
angular select 默认值设置方法
Jun 23 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
JS实现京东商品分类侧边栏
Dec 11 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之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
javascript轮播图算法
2016/10/21 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
Python中title()方法的使用简介
2015/05/20 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
python递归实现快速排序
2018/08/18 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
django+echart数据动态显示的例子
2019/08/12 Python
python多进程并行代码实例
2019/09/30 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
《乞巧》教学反思
2014/02/27 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2014年工商所工作总结
2014/12/09 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL