HTML <Base> Tag and Local Folder Path with Internet Explorer

Javascript onclick with base tag in ie with subfolder

After moving my test.htm into a subdirectory called test (final relative path: test/test.htm), I am able to confirm the bug (I initially misunderstood what you were asking about). Googling it also confirms that it is a bug, or at the very least a non-Standard implementation of the <base> tag (this may merely be yet another case of Microsoft not following implementations according to specification).

IE will honor the <base> tag for any defined anchors.

<a href="test/test.html">Click me</span>

will go to http://www.site.com/test/test.html (provided the <base> tag is either not closed, or not self-closed for older versions of IE), but IE (all versions) will only honor the base tag for anchors, not for JavaScript.

The reason IE prepends the additional test/ to your URL is actually standards-compliant behavior. As IE is ignoring the <base> tag, your link of test/test.html indicates that there is a subdirectory called test with a test.html file relative to the current directory (test) and IE correctly navigates to `test/test/test.html'.

As far as how to fix it...

Removing the <base> tag will not help.
Changing the onclick to a function that returns the correct base URL would work, but you've stated this is not acceptable.
window.location.href is a String, not a function, so "overriding" it is a non-starter.
Changing onclick to use an absolute URL would also work.
Removing all embedded onclick attributes and assigning them via JavaScript (attachEvent or addEventListener) would be more effective in the long run (separation of content/behavior) and allow you to easily attach the correct base URL (and the method I would probably choose, although I don't know your specific circumstance).
You could use a DOM manipulation library, like jQuery/Dojo/Prototype to loop through any onclick attributes and update the URL to an absolute URL.

BASE HREF, javascript, and Internet Explorer vs. Firefox

Using the assign method of window.location seems like the most straightforward answer.

Instead of

window.location = URI;

I'm using this:

window.location.assign( URI );

which is doing the right thing in both IE and Firefox.

html base tag referring to local folder

If you remove that /, it should make it relative off the current path, which, when a base tag is present would be

http://localhost/website/.

You will also need to add a trailing / to the end of the href, to indicate that it's a folder.

Full working example:

<!doctype html>
<html>
<head>
<base href="/test/" />
<script src="assets/test.js"></script>
<body>
hi
</body>
</html>

Actually depending on who you ask, it's still relative since it is relative off the current domain. But I prefer to call this absolute since it's signifying the path is from the root, based on the current domain. Although, I guess technically that makes it relative in the grand scheme of things, and absolute only in terms of the current domain. Whatever.

kindly refer this link

http://social.msdn.microsoft.com/Forums/ie/en-US/c51bb8b9-40ab-437b-a125-88b660f3e1ca/ie8-base-tag-issues

What are the recommendations for html base tag?

Breakdown of the effects of the base tag:

The base tag appears to have some non-intuitive effects, and I recommend being aware of the outcomes and testing them for yourself before relying on <base>! Since I've discovered them after trying to use the base tag to handle local sites with differing urls and only found out the problematic effects after, to my dismay, I feel compelled to create this summary of these potential pitfalls for others.

I'll use a base tag of: <base href="http://www.example.com/other-subdirectory/"> as my example in the cases below, and will pretend that the page that the code is on is http://localsite.com/original-subdirectory

Major:

No links or named anchors or blank hrefs will point to the original subdirectory, unless that is made explicit:
The base tag makes everything link differently, including same-page anchor links to the base tag's url instead, e.g:

<a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>

becomes

<a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>
<a href='?update=1' title='Some title'>A link to this page</a>

becomes

<a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.

Minor:

IE6 fix that requires conditional comments: Requires conditional comments for ie6 to avoid screwing up the dom hierarchy, i.e. <base href="http://www.example.com/"> as BalusC mentions in his answer above.

So overall, the major problem makes use tricky unless you have full editing control over every link, and as I originally feared, that makes it more trouble than it's worth. Now I have to go off and rewrite all my uses of it! :p

Related links of testing for issues when using "fragments"/hashes:

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results

Edit by Izzy: For all of you running into the same confusion as me concerning the comments:

I've just tested it out myself, with the following results:

trailing slash or not, makes no difference to the examples given here (#anchor and ?query would simply be appended to the specified <BASE>).
It however makes a difference for relative links: omitting the trailing slash, other.html and dir/other.html would start at the DOCUMENT_ROOT with the given example, /other-subdirectory being (correctly) treated as file and thus omitted.

So for relative links, BASE works fine with the moved page – while anchors and ?queries would need the file name be specified explicitly (with BASE having a trailing slash, or the last element not corresponding to the name of the file it's used in).

Think of it as <BASE> replacing the full URL to the file itself (and not the directory it resides in), and you'll get things right. Assuming the file used in this example was other-subdirectory/test.html (after it moved to the new location), the correct specification should have been:

<base href="http://www.example.com/other-subdirectory/test.html">

– et voila, everything works as expected: #anchor, ?query, other.html, very/other.html, /completely/other.html.