JavaScript HREF bug in IE
Monday, November 3rd, 2008
Take a look at the two screen captures below.
Both are from the same parking services page. The first is in FireFox 3, the second is in IE 7. JavaScript is being used to change to HREF attribute of mailto links for @pcc.edu addresses. But, why is the inner HTML also changing when viewed in IE?
At first I thought it was a jQuery bug. Here is the code:
$(this).attr("href","http://www.pcc.edu/resources/web/forms/email/?to="+address);
But, after searching it turns out to be an IE bug.
If the text and url of a link match – then Internet Explorer decides to assign them both to the HREF attribute! So, if you alter the HREF then the text will also change… Here is an example:
<a href="http://www.google.com">google.com</a>Â // fine - changing href will not change text
<a href="http://www.google.com">http://www.google.com</a> // bad - changing href will change the inner html text
Solutions
1) One answer is to keep the text different, but you may not be the only contributor to the site…
2) Another solution is to keep the HREF local:
$(this).attr("href","/resources/web/forms/email/?to="+address);
But, we have separate sub-domains and need all email to go to the www…
3) So, we are forced to store the inner html:
var linkHtml = $(this).html();
$(this).attr("href","http://www.pcc.edu/resources/web/forms/email/?to="+address).html(linkHtml);
Why am I still surprised by these IE bugs?
insurancesitesfind » Blog Archive » gabriel mcgovern (dot com) | Archive » JavaScript HREF bug in IE Says:
[…] If the text and url of a link match – then Internet Explorer decides to assign them both to the HREF attribute! So, if you alter the HREF then the text will also change… Here is an example: google.com … Read more […]
» gabriel mcgovern (dot com) | Archive » JavaScript HREF bug in IE Says:
[…] The first is in FireFox 3, the second is in IE 7. JavaScript is being used to change to HREF attribute of mailto links for @pcc.edu addresses More […]
Charles Bryant Says:
I am having a similar problem, I am changing a link so it can pass data to another page and ie looses half of the url. But the inner html is not the same.
IE下链接包å«@å—符时的一个问题 | oldj’s blog Says:
[…] JavaScript modifying href changes link text as well for mailto: protocol å’Œ JavaScript HREF bug in IE。 å‘表于: æ–‡ç« , 编程 / æ ‡ç¾: […]
Wm Says:
Your way of explaining the whole thing in this
post is truly good, all be able to easily understand it,
Thanks a lot.
nissan calgary Says:
Hello there! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha plugin
for my comment form? I’m using the same blog platform
as yours and I’m having trouble finding one? Thanks a
lot!