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?

6 Responses to “JavaScript HREF bug in IE”


  1. 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 […]


  2. » 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 […]


  3. 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.


  4. IE下链接包含@字符时的一个问题 | oldj’s blog Says:

    […] JavaScript modifying href changes link text as well for mailto: protocol 和 JavaScript HREF bug in IE。 发表于: 文章, 编程 / 标签: […]


  5. 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.


  6. 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!

Leave a Reply

You know you want to...