URL地址中的#符號(hào)使用說明

2019-11-20 23:56:50

字體：大中小

供稿：網(wǎng)友

一般我們想讓一個(gè)a標(biāo)簽點(diǎn)擊后執(zhí)行javascript代碼，有以下幾種寫法：
方式一：<a href="#" onclick="alert(1);">點(diǎn)擊一</a>
這種方式的缺點(diǎn)就是點(diǎn)擊后會(huì)在地址欄的URL后面加#號(hào)，同時(shí)把頁(yè)面移動(dòng)到頂部，一般不建議使用。
方式二：<a href="javascript:void(0);" onclick="alert(1);">點(diǎn)擊一</a>
這種方式避免了方式一的缺點(diǎn)，點(diǎn)擊后對(duì)頁(yè)面沒有任何影響。但是有一個(gè)致命的缺點(diǎn)，就是在IE6下不能執(zhí)行form對(duì)象的submit()方法，也不能執(zhí)行跳轉(zhuǎn)語(yǔ)句，比如
<a href="javascript:void(0);" onclick="document.forms[0].submit();">點(diǎn)擊一</a>
<a href="javascript:void(0);" onclick="window.location.>點(diǎn)擊一</a>
在IE6下就無效，換成href=”#”就能在IE6下正常執(zhí)行。

方式三：<a href="###" onclick="alert(1);">點(diǎn)擊一</a>
點(diǎn)擊后雖然會(huì)在地址欄的URL后面加三個(gè)#號(hào)，但是不會(huì)影響滾動(dòng)條，同時(shí)在IE6下也能執(zhí)行form對(duì)象的submit()方法與跳轉(zhuǎn)語(yǔ)句，算是一個(gè)比較折中的方法。

結(jié)論：我個(gè)人認(rèn)為如果執(zhí)行的javascript方法中需要提交表單、跳轉(zhuǎn)頁(yè)面，則用方式三，其它情況都用方式二。

另：這又附帶引出另一個(gè)問題，一般重新加載當(dāng)前頁(yè)面用如下的javascript代碼：
window.location.href = window.location.href;
但是當(dāng)URL地址中含有#時(shí)，上述代碼無效，于是需要用如下代碼：
window.location.href = window.location.href.split('#')[0];
將URL地址以#符號(hào)分割開，取第一部分即可。

在很多情況下/index.htm#desc，后面的desc可能就是參數(shù)，不容易的參數(shù)顯示不同的內(nèi)容，不是簡(jiǎn)單錨點(diǎn)，而是ajax讀取內(nèi)容。

上一篇：編寫可維護(hù)面向?qū)ο蟮腏avaScript代碼[翻譯]

下一篇：基于Jquery制作的幻燈片圖集效果打包下載