DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> IE6/7下a.getAttribute(href,2)的問題分析及解決
IE6/7下a.getAttribute(href,2)的問題分析及解決
編輯:前端技巧     

簡述
在IE6、7下,一般的a標簽(寫好在HTML中的,通過dom操作插入到頁面中的a標簽)中,假如href的值是一個相對路徑時,直接通過a.getAttribute("href"),獲取到的不是href的原始值,但可以通過a.getAttribute("href",2)獲取到原始值;但如果這種a標簽是通過innerHTML插入的話,即使通過a.getAttribute("href",2)也無法獲取原始的href值。估計在innerHTML='<a href="/haha">test</a>'的時候,IE6、7會對其做兼容處理,加入一些東西,這個時候通過outerHTML查看,a的href已經是完整地址-_-! 據說img的src也會出現類似情況。
匆匆路過的……看完上面即可……下面開始瞎扯:
---------------------------------------------------------------------------------------------------------------------------------
原始目標:一個單頁應用,想根據a的href屬性的值,是否http://開頭。如果是,則繼續跳轉;如果不是,則通過兼容的pushState修改url地址,觸發route。
問題:測試IE6、7時,發現a未能正確攔截……
解決辦法:問谷姐……得知IE6、7的getAttribute有第二個參數,設為2即可取回原來的屬性值。介紹鏈接如下:
http://msdn.microsoft.com/en-us/library/ie/ms536429%28v=vs.85%29.aspx
看到這裡,心裡暗爽,馬上補一句代碼……在按下Ctrl+F5測試後…馬上歇菜……為啥不行呢?!百思不得其解……
這時候跟一位朋友瞎扯……不知道扯哪去了……最後在問Frank的過程中,我排除了代碼中其他干擾,用以下代碼測試:

復制代碼代碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<a id="a" href="" onclick=".getAttribute(\"href\",2)">test</a>
</body>
</html>

 在IE6、7下點擊,都彈出大大的“/haha”!!!我就開始懷疑是其他東西在搞鬼了。這時候,想到我的a標簽是怎麼來的(基於字符串的js模板,innerHTML)……於是,再通過以下代碼模擬:

復制代碼代碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test"></div>
<script>
document.getElementById("test").innerHTML = '<a id="a" href="/haha" onclick="alert(this.getAttribute(\'href\',2));return false;">test</a>';
</script>
</body>
</html>

再次測試……sister's……重現問題了!實測,在生成a之後,對a再次setAttribute("href","/haha",2),再getAttribute("href",2)可以拿回“/haha”。但如果要在模板中做這種事情,似乎太惡心了,果斷放棄!還是聽Frank的話……簡簡單單加個屬性標識兩種鏈接元素,別鑽牛角尖。
再鑽一鑽-_-!:

復制代碼代碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="test"></div>
<script>
var test = document.getElementById("test");
var a = document.createElement("a");
var txt = document.createTextNode("test");
a.href="/haha";
a.onclick=function() {
alert(this.getAttribute('href',2));//"/haha"
return false;
};
a.appendChild(txt);
test.appendChild(a);
</script>
</body>
</html>

最後,懷疑通過innerHTML插入節點時,ie6、7會做一些它認為正確的“容錯”處理……容著容著,就讓我錯了……

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved