锚(Anchor)是什么?
之前我是这样认为的:锚是一个href="#id"或者“#name”这种a标签,主要用于页面内元素的快速定位,实现书签或者目录的功能。
后来我改变了对锚的看法,才识庐山真面目。
现在我对它的有了全新的认识:锚是一个anchor标签,即<a>标签。锚通过href属性可以链接到其它页面,也可以链接到当前页面的某个位置。
我们平时常说的锚点,或者锚链接,其实都是锚,叫法虽然不同但是本质一样,就像“西红柿”和“番茄”一样,只是一种叫法。网上对锚点或者锚链接的解释也是五花八门,存在有歧义的问题最好去官方网站上寻求答案,比如MDN或者W3C(翻墙版,中文版更新的慢,而且不一定准确)寻找答案。
锚在MDN上是这样描述的“
我英语不好,但是还是能读懂这句话的意思。这里就不作翻译了,怕出丑。
页面上每一个<a>标签都会为其创建一个Anchor对象,当然我们也可以通过document.createElement("A")去创建一个锚,关于Anchor对象的详细介绍请访问HTML DOM Anchor Object。
我们可以通过document.anchors[] 数组来获取锚,也可以使用 document.getElementById()或者其它获取dom对象的方法。
注意:document.anchors[]只能获取带有name属性的锚,如果锚没有name属性,可以通过document.getElementById()访问。
hash
大概意思就是url#号后面(包含#)的片段,这个片段不是被压缩过得(后面这句我也不知道怎么翻译........)。
hash是一个可读可写的属性,有两种方式可以取得hash,window.location.hash或者用window.location.href然后通过第一个#进行截取
hash的可以用来跨域,通过iframe加上location.hash组合方式实现js跨域,还可以利用hashchange实现ajax前进后退或者单页面试图切换,比如Angular路由
onhashchange
MDN这样介绍的:
当url#号后的字符包括#号发生改变时会触发onhashchange事件。
那么怎么才会改变#号后的内容呢?
主要有四种方式:
1、手动改变浏览器地址栏的url的hash值,即修改url#号后面的部分
2、通过代码改变hash值,如window.location.href = "url#hash",或者window.location.hash = "yourhash"。
3、通过锚改变hash值,href="#号+id"或者href="#号+name"。
4、通过浏览器自带的前进和后退也有可能触发onhashchange,因为hash改变虽然没有进行页面reload,但是会将hash改变后的url写入历史中,比如点击一个锚链接,页面滚动到某个位置,此时url的hash值已经改变,点击后退按钮会触发hashchange。
举栗,利用hash原理实现ajax前进后退功能
我们都知道ajax请求不会在浏览器中产生历史记录,如果想看前一个请求的数据,按浏览器的后退键是没有用的,只有重新填写查询条件,然后再执行查询才能得到想要的结果。这样在有些场景下是不合理的。利用hashchange解决上面的的问题,举栗子:
ajax请求是58同城里的搜索框的数据,输入苹果->搜索,输入橙子->搜索,点击后退按钮回到苹果列表页面。
下面是一种实现方式。感兴趣的可以亲自试一下。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hashchange</title> <style> p{ font-size: 24px; } </style> </head> <script type="text/javascript" src = "jquery.js"></script> <script type = "text/javascript"> $(function(){ $("button").click(function(){ var queryText = $("#search").val(); query(queryText); }) }); //注册hashchange事件,为了兼容低版本IE,用了两种方式进行注册 window.addEventListener("hashchange",hashCallBack); window.attachEvent("onhashchange",hashCallBack); //hash改变的监听函数 function hashCallBack(e){ var queryText = window.location.hash.split("#")[1]; //获取hash值 if(queryText == $("#search").val()) return if(queryText){ $("#search").val(queryText); }else{ $("#search").val(""); } query(queryText); } //查询按钮 function query(queryText){ $("#content").empty(); $.ajax({ url:"http://suggest.58.com.cn/searchsuggest_14.do?inputbox="+queryText+"&cityid=1&catid=0&callback=callback1538", type:"get", dataType:"jsonP", success:function(e){ console.log("成功"); } }); } function callback1538(data){ window.location.hash = $("#search").val(); var arr = data.w; for( var i = 0;i<arr.length;i++){ var p = document.createElement("p"); var textnode=document.createTextNode(arr[i].k); p.appendChild(textnode); document.getElementById("content").appendChild(p); } } </script> <body> <input type = "text" id = "search"><button>搜索</button> <div id = "content"></div> </body> </html>
本章内容就完稿了,内容虽然不多,但是却花费了很大的精力,总之收获还是多多的。
其实我这篇文章就阐述了一个观点,锚不仅仅是定位而已。
如果你觉得我哪里说的不正确,还望指正。