Url Hash with Html Base Tag

问题

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?

回答1:

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.

回答2:

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>

回答3:

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.

回答4:

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.)

回答5:

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

回答6:

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.

回答7:

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

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

来源：https://stackoverflow.com/questions/659120/url-hash-with-html-base-tag

标签

javascript

html

hash

base-tag