JQuery Not Parsing Properly attr("href") in IE

Question

I have a really wierd issue that I'm hoping someone can shed some light on. I am using Jquery to retrieve an Http Response from another website (which I own). Once I receive the DOM, I parse through it in order to get certain information. However, when I try to get the href attribute of a link, IE is adding the local domain to the beginning of the href!

Here is my code:

$.ajax({ 
                    type: "POST",
                    url: "MyPage.aspx/GetWebResponse",
                    data: "http://myWebSite/pages/AnotherPage.aspx",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    asynch: false,
                    success: function(data)
                    {
                        var __htmlForMainPage = data.d;                   


                        var PageLink = $(__htmlForMainPage).find("a:contains('Get This Link')").attr("href"); 
                                                }   
                });

My variable PageLink SHOULD be "/pages/getThisPage.aspx?id=8347". However, it is being returned as "http://myserver/pages/getThisPage.aspx?id=8347".

This is ONLY happening in IE. FireFox is fine. This also is only happening when I put it on the server. When I run it locally, everything works fine, in both IE and FF. But when I put it on the server, FF still works fine, but IE does not.

Has anyone seen this before, or know what's going on here? Any help is greatly appreciated!

Answer 1

This isn't a jquery issue, it is an ie quirk. It is easy to remedy "http://myserver/pages/getThisPage.aspx?id=8347".replace('http://myserver', '').

Answer 2

The "problem" is that what you see in your HTML sources is not what jQuery "sees" in the browsers DOM-Tree.

That means that IE most likely just saves absolute URLs inside the a-Nodes of your DOM (while other browsers don't, but that's not really relevant for the browser, because it can work with absolute URLs only anyway, so it has to compute this absolute URL sooner or later).

Now jQuery just returns the values that are stored in the DOM-tree.

If you want to verify this, just get Firebug! You can view the DOM there (and since IE8 there is something similar in IE as well).

Answer 3

When accessing the href DOM property of an A element in IE, it will return the absolute path to the url. The same is true for getAttribute() in IE7 and lower (since getAttribute was broken until IE8).

http://msdn.microsoft.com/en-us/library/cc848861(VS.85).aspx:

Internet Explorer 8 or later. In IE8 mode, the value of the HREF depends on the context of the reference to the attribute. When read as a Document Object Model (DOM) attribute, HREF returns a URL relative to the domain hosting the Web page. HREF returns the value specified by the page author when read as a content attribute when the page is displayed in an earlier document compatibility mode, or when the page is viewed with an earlier version of the browser. For more information, see Attribute Differences in Internet Explorer 8.

jQuery will always fetch the DOM property if the naming convention is the same:

// If applicable, access the attribute via the DOM 0 way
if ( name in elem && notxml && !special ) {
    // ...
}

The name in elem part here is checking to see if a DOM property has been specified. To work around this for IE8 you could specify the property in uppercase - .attr("HREF") - because DOM properties are case sensitive. Unfortunately the only workaround for IE7 and lower is to perform a string replace:

var base = window.location.href.substring(0, window.location.href.lastIndexOf("/") + 1);
PageLink = PageLink.replace(base, ""); 

Answer 4

Different browsers will return different things for URL attributes. Normalizing the URL is your job. I use a regex like this:

var urlParts = /^(https?:\/\/.+?)?(\/.+?)(\?.*?)?$/.exec(href);
var server = urlParts[1]; // maybe be '' depending on the browser
var path = urlParts[2];
var query = urlParts[3];

So you want path + query.