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事件实现代码
Mar 12 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
基于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
咖啡的种类和口感
2021/03/03 新手入门
php中设置index.php文件为只读的方法
2013/02/06 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python GUI编程完整示例
2019/04/04 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
幽默自我介绍演讲稿
2014/08/21 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
学雷锋感言
2015/08/03 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python