TIPS-小心IE7會偷改Anchor式HREF
8 |
今天用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());
Comments
# by 阿育
嗨!黑暗兄最近才發現這個部落格,真是不錯! 我一直習慣jQuery DOM式的寫法(這名稱是我亂掰的XD),所以沒遇過你說的問題耶 請試試以下寫法,IE6 & 7 都沒問題 a = $('<a></a>'); a.attr("href","#aaa"); $("body").html(a); alert($("body").html()); a = $('<a></a>'); a.attr("href","#aaa"); $("body").append(a); alert($("body").html()); 另外,您寫的Mini jQuery Lab跟Mini C# Lab都很好用哦,感謝分享
# by Jeffrey
to 阿育,有趣的地方來了,DOM的寫法(先建元件再設attr)比起直接串好html字串再用html()指定慢上許多(例如: 這篇評比-http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly),所以我挺習慣先跑迴圈組html再一次設定,結果---有得就有失! 哈!
# by 阿育
這個問題我倒是沒注意過,因為平常這種指令每次執行的量不算大,所以沒感覺有差異 也很有趣的是,我習慣這麼寫是因為曾經看過某篇文章,在設定某些屬性的時候,組字串的方法會有問題 XD 聽你這麼說,下次單次執行量大的時候,我會試著用組字串的方法 另外更搞笑的是....剛剛才發現....原來你的文章最後有寫解決方法了,我在做啥啊?太搞笑 XDDDDD
# by WD
@暗黑 可以先以 $.support.hrefNormalized 來判斷 browser 是否會有以上行為, 再加上先建元件後設attr的方法來達到速度和簡潔. $("body").append( $.support.hrefNormalized ? ($("<a href='#aaa'></a>")) : ($("<a />").attr("href", "#aaa"))); WD
# by Jeffrey
to WD, 幹得好!! 這招我學起來了(抄筆記)
# by azure
不好意思,想請教$.support.hrefNormalized 相關用法..如果他是有階層性的,如:<div><a href='#aaa'></a><div> $("body").append( $.support.hrefNormalized ? ($("<div><a href='#aaa'></a><div>")) : (這邊我怎麼寫都會有錯誤...)); 能請教一下該怎寫嗎?
# by Jeffrey
to azure, 可以寫成這樣子: $("body").append( $.support.hrefNormalized ? $("<div><a href='#aaa'>AAA</a></div>") : $("<a />").attr("href", "#aaa").text("AAA").wrap("<div></div>").parent() );
# by azure
原來可以這樣用。。,受教了