[jQuery] Re: How do I get the actual HREF of a link?

My point exactly.

--Karl

On Jan 26, 2009, at 10:10 AM, seangates wrote:

I've used this a hundred times:

$('#testlink').attr('href');

Don't make jQuery more complicated than it has to be.

-- Sean

On Jan 26, 7:32 am, Karl Swedberg <k...@englishrules.com> wrote:

On Jan 26, 2009, at 12:56 AM, jQuery Lover wrote:

You can also try this:

$('#testlink')[0].getAttribute('href');

Returns whatever is in your href...

Actually, in IE, where I'm guessing the problem is occurring, you need  

to set the iFlags argument to 2 in order to get the actual value of  

the href attribute.

 From MSDN [1]:

iFlags      Optional. Integer that specifies one or more of the  

following flags:

0 Default. Performs a property search that is not case-sensitive, and  

returns an interpolated value if the property is found.

1 Performs a case-sensitive property search. To find a match, the  

uppercase and lowercase letters in sAttrName must exactly match those  

in the attribute name. If the iFlags parameter for getAttribute is set  

to 1 and this option is set to 0 (default), the specified property  

name might not be found.

2 Returns the value exactly as it was set in script or in the source  

document.

[1]http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx

In this case, it would be:

$('#testlink')[0].getAttribute('href', 2);

One more reason to just use the jQuery method -- so we don't have to  

worry about such cross-browser silliness.

--Karl

____________

Karl Swedbergwww.englishrules.comwww.learningjquery.com

On Mon, Jan 26, 2009 at 7:14 AM, Jumpfroggy  

<rocketmonk...@gmail.com> wrote:

Here's the short version:

I have a link:

  <a id="testlink" href="page.html">page.html</a>

But when I do this:

  alert($('#testlink')[0].href);

I get this:

 http://localhost/page.html

How do I get the *actual* HREF of the link ("page.html"), and not the

mangled version?

Thanks!

----------

The long version:

I have a few links in HTML:

  <a href="/page1.html">/page1.html</a>

  <a href="http://localhost/page1.html">http://localhost/page1.html</

a>

  <a href="http://localhost:80/page1.html">http://localhost:80/

page1.html</a>

  <a href="http://localhost/page2.html">http://localhost/page2.html</

a>

  <a href="http://www.google.com/page1.html">http://www.google.com/

page1.html</a>

When I do this:

  $("[href]").each(function() {

      var matches = $("[href='" + this.href + "']");

      console.log("Searching for HREF \"" + this.href + "\", text

\"" + $(this).html() + "\"" );

      matches.each(function() {

          console.log("Found: HREF \"" + this.href + "\", text \"" +

$(this).html() + "\"" );

      });

  });

I get this:

  Searching for HREF "http://localhost/page1.html", text "/

page1.html"

  Found: HREF "http://localhost/page1.html", text "http://localhost/

page1.html"

  Searching for HREF "http://localhost/page1.html", text "http://

localhost/page1.html"

  Found: HREF "http://localhost/page1.html", text "http://localhost/

page1.html"

  Searching for HREF "http://localhost/page1.html", text "http://

localhost:80/page1.html"

  Found: HREF "http://localhost/page1.html", text "http://localhost/

page1.html"

  Searching for HREF "http://localhost/page2.html", text "http://

localhost/page2.html"

  Found: HREF "http://localhost/page2.html", text "http://localhost/

page2.html"

  Searching for HREF "http://www.google.com/page1.html", text

"http://www.google.com/page1.html"

  Found: HREF "http://www.google.com/page1.html", text "http://

www.google.com/page1.html"

The problem is that elem.href is returning a mangled version of the

HREF, but the [href='...'] selector requires the URL exactly as it is

written in the HTML.  So when an element has "/page.html" as it's

HREF, doing elem.href returns "http://localhost/page.html" instead.

So to search for the "/page.html" HREF, I have to search for:

  [href='page.html']

  [href='/page.html']

  [href='http://localhost/page.html']

  [href='http://localhost:80/page.html']

  [href='https://localhost/page.html']

  [href='https://localhost:443/page.html']

Where "localhost" and "80" must be determined by javascript at  

runtime

to reflect the current server and port.  Also, the "/page.html" and

"page.html" are not comprehensive.  The javascript would also have to

check for all permutations of "../page.html", "folder/../page.html",

etc.  The root of the problem here is this:  how can I get the

*actual* HREF of a link via javascript, and not the mangled version?