在IE 7中，如果链接是使用jQuery创建的，如何获得链接的href属性的文字值？

Question

If you have a regular link in HTML, you can get the value of its href attribute using jQuery's attr function:

<a id="testLink" href="test/link.html">Test Link</a>`

>>> $('#testLink').attr('href');
testLink.html

Example:

• http://jsfiddle.net/63RsQ/1/

However, if the link was created using jQuery, then in IE 7 , this function returns the absolute URL that the browser would access if you clicked on the link (eg https://stackoverflow.com/questions/ask/testLink.html ), instead of the literal value of the href attribute.

Example:

• http://jsfiddle.net/xtrEB/10/

I've also tried this , this.href , and this.getAttribute('href') , and they all return an absolute URL.

Is there any way to get the literal value of the href attribute of a link created by jQuery in IE 7?

Answer 1

If you are creating the link in a way that jQuery is forced to use .innerHTML , it will work not properly and is documented in: http://api.jquery.com/html/ (also http://api.jquery.com/jQuery/#creating-new-elements ) :

This method uses the browser's innerHTML property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all href properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate compatibility layer.

To fix it, create the link in a way that doesn't force jQuery to use .innerHTML :

$('#test').append( $("<a>", {href: "test/link.html", text: "Test Link"}));

http://jsfiddle.net/xtrEB/12/

Answer 2

I think it's not possible, at least not in IE7. JQuery uses innerHTML , and IE seems to rewrite the href attribute to a Fully Qualified Domain Name (FQDN) on rendering (earlier versions of IE are known to do so). So the literal value is lost on rendering. If you know the path, you could try to find it using some string eqation, stripping the domain from the url or something. Or forget about IE<8 alltogether if possible.

May be this article sheds some light

If you use plain javascript and DOM-methods to add elements, you can retrieve the literal value even in IE7. See this jsfiddle

Answer 3

try this:

$('a').click(function () {
    var hrf = this.href;
    alert('this.href: \n' + hrf.slice(hrf.lastIndexOf('/')+1, hrf.length) );
    return false;
});

http://jsfiddle.net/xtrEB/5/