Url Hash with Html Base Tag

D

7

13

window.location.hash

When using a link for a javascript action, I usually do something like this:

<a href="#">Link Text</a>

That way, when someone clicks the link before the page loads nothing terrible happens.

Html Base Tag

On my current project I use this same construct, but with a base tag:

<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="#">Link Text</a>
</body>
</html>

However, if the page url is:

http://example.com/dir/page

clicking the link navigates to

http://example.com/#

rather than

http://example.com/dir/page#

How can I fix this?

Djebel answered 18/3, 2009 at 16:48 Comment(1)

Don't use "foo.com". See rfc 2606: rfc-editor.org/rfc/rfc2606.txt – Mammary 18/3, 2009 at 16:53

F

11

Either remove your base tag or change your href attributes to be fully qualified. What you are observing is the intended behavior when you mix base with a elements.

Fiesta answered 18/3, 2009 at 16:49 Comment(1)

+1 Brad, you're trying to work around a problem that doesn't need to exist. Do you really need to use the base tag? – Infidel 18/3, 2009 at 17:31

H

3

If you're inclined to use an a tag another solution is to not use # as the href target (when you don't specify one it causes a jump to the top of the page which I find undesirable). What you can do is:

<a href="javascript:">Some Link that Goes nowhere</a>

Really though, unless you are doing something that requires that to be an a tag a span would be your best bet:

CSS:

.generic_link {
  text-decoration:underline;
}
.generic_link:hover {
  text-decoration:none;
}

HTML:

<span class="generic_link">Something that really isn't a link</span>

Humor answered 18/3, 2009 at 17:38 Comment(1)

See Gumbo's comment, returning false from a click handler stops the link being followed. javascript: URLs are generally best avoided. – Epiphysis 19/3, 2009 at 10:16

E

1

If there's no URL that is suitable for a non-javascript user, then don't use an <a>. <a> tags are for links to other pages.

Any visible HTML element can have an onclick and won't have this problem you describe.

Edlun answered 18/3, 2009 at 16:51 Comment(3)

I second this motion. Use a <span> or something that isn't an <a> if it doesn't actually go anywhere. – Leanaleanard 18/3, 2009 at 16:57

This has negative implications for keyboard users though: now you can't focus the element. There is an argument for using <button>/<input type="button"> here. – Epiphysis 19/3, 2009 at 10:14

The same can apply to mobile users on iOS. Only an <a> with an href attribute will trigger the onclick, at least in the iOS versions I've worked with. – Dotterel 15/5, 2014 at 17:21

G

0

Return false on the onclick event to disable the link:

<a href="#" onclick="doSomething(); return false">Link Text</a>

(This is just an example of how you’d do it inline. But try to avoid inline declarations and use techniques of progressive enhancements.)

Gingili answered 18/3, 2009 at 16:50 Comment(3)

OP specified "That way, when someone clicks the link before the page loads nothing terrible happens" which suggests the onclick handler hasn't been attached yet. Inline javascript is ugly and should be avoided – Edlun 18/3, 2009 at 16:52

After your edit, it's progressive enhancement which is causing this problem. The problem is the user is clicking the "link" before the extra click handlers have been added. In that case, there's no way to avoid link navigation. The solution is to make it not a link – Edlun 18/3, 2009 at 17:21

Or, of course, make it a link which has an equivalent non-javascript action. Depending on what the action is, that's probably the best solution anyway – Edlun 18/3, 2009 at 17:22

W

0

<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="./dir/page#">Link Text</a>
</body>
</html>

Won answered 11/2, 2015 at 0:7 Comment(0)

F

0

I had the same issue in the past.
I had a link that i wanted to be empty, to link to the current page.
Without the base html element this will be just an a element with href="#".

My example without using the base html element,

<li>
    <a href="#"><div>The text of my Link</div></a>
</li>

The same example with the solution i found,

<li style="cursor: pointer !important;">
    <a href="#" style="pointer-events: none;"><div>The text of my Link</div></a>
</li>

This solution only uses css to disable the link.

With the first css rule cursor: pointer !important; i ensure that this link will have the correct (for my case) pointer icon.
With the second rule pointer-events: none; i ensure that this link will not be clickable.
You can find more about this rule following this link.

Florri answered 24/1, 2016 at 11:44 Comment(0)

H

-1

You can just simply remove href attribute from your <a> tag.

<a href="#"> => <a>

Hermosa answered 30/12, 2017 at 2:33 Comment(0)

window.location.hash

Html Base Tag

This solution only uses css to disable the link.

Recommended topics

Hot tags