Tuesday, June 02, 2009 - 文章

TIPS-小心IE7會偷改Anchor式HREF

今天用jQuery UI Tabs做網頁，其中部分頁籤要動態產生，故現場組裝<li><a href='#divName'><span>tabName</span></a></li>，再呼叫.tabs()達到目的。測試發現，動態產生的頁籤，在IE8開啟IE7相容模式時，點下去會以動態方式載入同一頁面，害網頁中的$(function() { ... })重覆被執行，弄得網頁一團亂。但若使用FF、Chrome甚至切成IE8標準模式執行，則沒有任何問題。

模索了好久，總算找出問題關鍵。

我寫成一小段Code，大家可以自己用Mini jQuery Lab實測一下:

$("body").append("<a href='#aaa'>AAA</span></a>");
alert($("body").html());
$("body").html("<a href='#aaa'>AAA</span></a>");
alert($("body").html());

大家覺得alert出來的結果是什麼，應該是<A href="#aaa">AAA</SPAN></A>吧? 對IE8, FF, Chrome來說是這樣沒錯，但在IE7模式下，卻會得到以下結果(其中htt"q"是故意改掉的，以避免PO文時被自動套上連結):
<A href="httq://www.darkthread.net/minijquerylab/EmptyFrame.htm#aaa">AAA</SPAN></A>

是的，不管用html()或append()，IE7都會很雞婆地套上location.href，而對jQuery UI Tabs來說，看到http開頭就意味著要由外部載入，才搞出這場風波。

最後，我用了以下的寫法含淚躲開...

$("body").append("<a xhref='#aaa'>AAA</span></a>");
$("a[xhref]").each(function() { 
    var a = $(this);
    a.attr("href", a.attr("xhref"));
    a.removeAttr("xhref");
}); 
alert($("body").html());
Posted 02 June 2009 07:03 PM 由 Jeffrey | 8 comment(s)
Filed under: ,

搜尋

Go

<June 2009>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
 
RSS
【工商服務】
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人，十年的IT職場生涯，寫過系統、管過專案， 也帶過團隊，最後還是無怨無悔地選擇了技術鑽研這條路，近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication