Wrong extraction of .attr("href") in IE7 vs all other browsers?

Question

Can it really be true that the attr("href") command for a link is handled very different in IE7 in comparison to all other browsers?

Let's say I have a page at http://example.com/page.html and I have this HTML:

<a href="#someAnchor" class="lnkTest">Link text</a>

and this jQuery:

var strHref = $(".lnkTest").attr("href");

Then in IE7 the value of the strHref variable will be "http://example.com/page.htm#someAnchor" but in other browsers it will be "#someAnchor".

I believe that the last mentioned case is the most correct one, so is it just a case of IE7 being a bad boy or is it a bug in jQuery?

It's a little bit of both - IE7 is inconsistent, but jQuery should still handle it. — Keith, Oct 20 '09 at 08:34
This happens in IE8 too, as I've found out recently. Not sure which tag to remove in order to add it. Definitely not limited to jQuery though. Happens when using getAttributeNode("href"). — Jonathon Watney, Jan 09 '13 at 00:12

meder omuraliev · Accepted Answer · 2009-10-20T08:49:02.950

18

It's certainly not a bug in jQuery but instead browsers' inconsistent implementations of .getAttribute('href') - I suggest using just .get(0).href for consistency.

Seems like you can access the attribute text in IE and Mozilla using .get(0).getAttribute('href', 2) if you don't want the absolute URI. Note however this won't work in Opera and I haven't tested in Safari/Chrome/anything else.

You could also strip out the domain or split on '#' for .get(0).href and use the second part of the array assuming it even contains '#' ( check .length ).

http://www.glennjones.net/Post/809/getAttributehrefbug.htm

edited Oct 20 '09 at 08:49

answered Oct 20 '09 at 08:31

meder omuraliev

183,342
71
393
434

It was not a question about how to retrieve the anchor part of the href. I figured that one out myself. I was just curious about why the difference exists. But thanks a lot for answering anyway. I needed to get the anchor part so I just used substring to extract the correct value :) – EmKay Oct 20 '09 at 17:20
i ran into this issue today with IE8. we learend that if we used a fully qualified domain name i.e. http://app.somedomain.com/virtualDir/page.aspx, then the attribute text was returned. however if we used just the netbios machine name then the absolute url was being returned... freaky. – CedricB Dec 23 '10 at 23:01
6

jQuery could have helped to standardize the behaviour as it does with Event objects. – Ates Goral Apr 20 '11 at 20:04
1

nowadays it does, no idea when this was 'fixed' though, tested with 1.7.1 – Matijs Jun 25 '12 at 13:33

score 4 · Answer 2 · answered Jul 14 '11 at 16:52

4

I believe it's implemented like that in all IE 7+.

I use:

var href=jQuery('#foo').attr('href');
href=href.substring(href.indexOf('#'));

Hope it helps! Cheers.

answered Jul 14 '11 at 16:52

Teo Sibileau

294
2
5

(It seems there's a `this.hash` property that one can use too, see the JavaScript Bible page 603 (http://goo.gl/OF16Q), in most browser, in IE 7 at least. Then you wouldn't need to call `substr`.) – KajMagnus Oct 05 '11 at 14:58

score 2 · Answer 3 · answered Jan 05 '12 at 09:31

2

I found a bug related to this issue: http://bugs.jquery.com/ticket/2747 jQuery implemented a workaround for the IE7 'bug'. However in jQuery 1.7.1 this bug was reintroduced. I created a new bug for 1.7.1: http://bugs.jquery.com/ticket/11129

answered Jan 05 '12 at 09:31

timing

6,340
1
17
16

2

I noticed the bug was closed as "cannot reproduce" but the test case they gave was faulty. I created a new JSFiddle test to illustrate the bug - hopefully the ticket will be reopened. – Marc Novakowski Apr 06 '12 at 23:42

score 1 · Answer 4 · answered Jan 28 '13 at 13:54

1

another way is to just use a data attribute, instead of href

<a data-href="#anchor-0">example</a>

.

var href = $(this).attr('data-href');

answered Jan 28 '13 at 13:54

Johansrk

5,160
3
38
37

score 1 · Answer 5 · answered Apr 21 '10 at 08:48

1

I use:

var hrefArr = $(this).attr('href').split('/');
var id = hrefArr[hrefArr.length-1];

when I need everything after the last "/".

answered Apr 21 '10 at 08:48

chrwahl

8,675
2
20
30

But then what if the href is "http://example.com/folder/page.htm" or simply "/folder/page.htm"? Then you will only get "page.htm" and this is not correct. – EmKay Apr 21 '10 at 13:46
This was just to show a simple example. I don't have at code example here, but you could run through the array and check for strings. For instance all strings after a substing that contains ".com" at the end. Straight forward.... – chrwahl May 25 '10 at 11:46
You should use regular expressions for stuff like this. Much less likely to break. – Benbob Jun 02 '11 at 21:48

score 0 · Answer 6 · answered Mar 27 '12 at 05:34

I ended up creating a variable via PHP, then using the javascript replace() method strip it out of the href:

<script>var domain = 'http://<?=$_SERVER['HTTP_HOST']?>';</script>

<script>
$(function(){
/* prevent default action of all anchors with hash class */
$('#canvas').on('click', 'a.hash', function(event) {
    event.preventDefault();
            // get the href of the anchor
    var hash = '!' + $(this).attr('href');
            // remove the absolute url if it exists
    hash = hash.replace( domain, '' );
    // redirect
            window.location.hash = hash;
});
});
</script>

catalinux · Answer 7 · 2013-08-07T12:25:53.813

-1

The problem is that IE7 and IE8 change also the text. So a good workaround is to do like this

$('#linkId').attr('href','newlink').text('oldtext');

edited Aug 07 '13 at 12:25

answered Jul 23 '13 at 08:03

catalinux

1,462
14
26

Wrong extraction of .attr("href") in IE7 vs all other browsers?

7 Answers7

Linked

Related