HTML TAG and local folder path with Internet Explorer

Question

I am trying to use < base> TAG to indicate the source folder containing the media files for my html pages located in separate folder.

I have the following folder structure:

A
|- HTML_PAGES        (contains html files)
|- MEDIA_FOLDER      (contains the media used by this html pages)

I try to indicate the html files with the media used by html pages - so, in each html file i have something like this:

<base href="../MEDIA_FOLDER"/>

And the problem is: it works for some browsers (Opera, Chrome) but it doesn't work for Internet Explorer and Firefox. How to make it work with IE and Firefox?

Which version of IE? IE8 has a bug where BASE tags are not properly respected for pages/resources using the FILE URI Scheme. Firefox has a security restriction that grants a local HTML page access only to subpaths of the main page. — EricLaw, Oct 18 '10 at 14:05
And that is again problem of the crappy Internet Explorer that one runs into … — gamma, May 26 '11 at 13:25

Richard Connamacher · Answer 1 · 2012-11-15T23:48:09.903

33

This is definitely a very annoying bug in IE, but I just found a workaround.

The thing to realize is that IE does resolve the relative path, and then promptly ignores it. You can even see the fully resolved URL by checking the value of the base tag's 'href' property later on using JavaScript. So this (rather silly) piece of code resets the <base> tag's 'href' attribute to the very full URL that IE had already resolved, thereby causing it to no longer be ignored.

Add the following HTML to the top of your page, right after the tag and before you actually use any URLs:

<!--[if IE]><script type="text/javascript">
    // Fix for IE ignoring relative base tags.
    (function() {
        var baseTag = document.getElementsByTagName('base')[0];
        baseTag.href = baseTag.href;
    })();
</script><![endif]-->

(conditional comments necessary since this code can break the <base> tag in Safari/Chrome, and other browsers clearly don't need it.)

Such a silly bug.

edited Nov 15 '12 at 23:48

answered Nov 14 '12 at 04:42

Richard Connamacher

3,115
19
21

3

This saved me big time. I have some test html files deep in the hierarchy of my project (which could be hosted from different paths, so the URLs need to be relative) and setting the base href definitely helps. `` I just need to figure out the dots once! Great work! – webXL Jan 04 '13 at 17:37
It was in test case html files that I hit this bug as well. Common use for `` tags. Glad to help! :) – Richard Connamacher Jan 04 '13 at 21:49
Tried this, but I'm getting the exact same behavior as previously: works in Firefox (with or without the script), but in IE 8 the URLs are the same as if base href was not set (ie, my base href="../..", the calculated URLs are 2 directory levels too deep). – Sasha Feb 18 '14 at 21:17
Awesome! Just what I needed! – Dominik Nov 19 '15 at 23:55

score 9 · Answer 2 · answered Jan 23 '12 at 15:22

It looks like there are two separate issues with IE8 and IE9.

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/c51bb8b9-40ab-437b-a125-88b660f3e1ca/

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/e5cfdf07-494c-4703-aa4a-34a1a548de05/

A workaround that seems to be working in IE8 and IE9 is including http:// in the base href. I am not experiencing any issues in Firefox (v9)

score 2 · Answer 3 · answered Oct 13 '10 at 17:15

2

Use an absolute URL:

<base href="http://yourdomain.com/MEDIA_FOLDER"/>

answered Oct 13 '10 at 17:15

Diodeus - James MacFarlane

112,730
33
157
176

Unfortunately, the pages are single html files that refer to the media locally, without web server. Anyway - it might work? – Przemysław Michalski Oct 13 '10 at 17:22
Using absolute URLs is not an acceptable solution when pages usually travel through multiple environments these days before they end up in production. – demisx Sep 13 '14 at 03:05

score 2 · Answer 4 · answered Oct 13 '10 at 18:01

<base href="../MEDIA_FOLDER"/>

Doesn't have a trailing slash, so it refers to a file called MEDIA_FOLDER and not a folder. Often you don't notice the difference because web servers will redirect an attempt to fetch folder to the proper address folder/, which will then typically return a default document (eg. folder/index.html). But for relative URL resolution it does make a difference.

target relative to /folder is not /folder/target, it's just /target. To make it /folder/target you must let the browser know that the base URL is a folder, by adding a trailing slash:

<base href="../MEDIA_FOLDER/"/>

There is no reason for different browser behaviour here. A place you may find different browser behaviour, though, is if you've accidentally used a Windows-filesystem-style backslash \ instead of /, so do check for that.

You're right about the trailing slash, but: works fine for Opera and Chrome, but not for IE and Firefox. — Przemysław Michalski, Oct 13 '10 at 18:18

ngInstance · Answer 5 · 2018-02-14T21:51:08.893

1

Richard's answer got me close to the working solution, here is what I ended up adapting it to.

<!--[if IE]><script type="text/javascript">
    // Fix for IE ignoring relative base tags.
    (function() {
        var baseTag = document.getElementsByTagName('base')[0];
        baseTag.href = window.location.protocol + '//' + window.location.host + baseTag.href;
    })();
</script><![endif]-->

edited Feb 14 '18 at 21:51

answered Feb 14 '18 at 21:09

ngInstance

11
3

score 0 · Answer 6 · answered Aug 22 '12 at 17:05

0

This is a known issue and it's that IE requires closing the tag but not Firefox, the other browsers simply don't care. Here is what works for me:

<base href="{BASE_PATH}"><!--[if IE]></base><![endif]-->

Feel free to tweak at your will, and of course replace {BASE_PATH} with your actual path, i normally use an absolute path, but i've seen this work for relative too

EDIT: And please note that your path should end with a trailing slash

answered Aug 22 '12 at 17:05

Dany Khalife

1,850
3
20
47

1

That made no difference for me testing in IE 9. Only using an absolute URL fixed it. – kynan Sep 04 '12 at 20:08
i am sorry it hasn't made any difference to you but this IS a known bug. See http://ruthsarian.wordpress.com/2006/01/31/ie-base-tag-bug/ Now please remove your downvotes – Dany Khalife Jul 02 '13 at 12:29

Samuel Cole · Answer 7 · 2010-10-13T17:25:28.957

0

I'm not sure how BASE works with directory relative urls, try giving it a root relative url like

<base href="/MEDIA_FOLDER"/>

edited Oct 13 '10 at 17:25

answered Oct 13 '10 at 17:17

Samuel Cole

2,005
2
14
14

Actually you are talking about using of site rooted paths which must start with `/`. It could be a good idea to end them with `/` too. – it3xl Jun 22 '20 at 14:20

score 0 · Answer 8 · answered Oct 13 '10 at 18:50

0

Is your base element inside the body element? That could cause the problem. (Check in Firebug, it might end up in the body even if your code looks okay on first sight.)

answered Oct 13 '10 at 18:50

Ms2ger

15,596
6
36
35

my html code: – Przemysław Michalski Oct 13 '10 at 19:34

it3xl · Answer 9 · 2020-06-23T08:27:09.307

I consider that people reading this are dealing with enterprise or legacy web applications.

We can't rely on the IE Conditional Comments as it just might be ignored by IE, believe it or not. At least, it is my persisting case.

I added below my script which is browser features' agnostic.

It was tested in IE11 under IE-5-7-8-9-10-11 render modes with HTML5 <!DOCTYPE html>.
With the IE Enterprise mode and without.

It works for relative paths like ../MEDIA_FOLDER/.

It works for my_child_folder/MEDIA_FOLDER/ with the exception of IE7-5.
I'm a little lazy to fix it and encourage you to use rooted paths.
I.e. simply use /some_root_folder/my_child_folder/MEDIA_FOLDER/ instead of my_child_folder/MEDIA_FOLDER/. (Or improve my script, or do not use IE7-5.)

We have two main bugs here and a bunch of cases.

First, IE9 and IE8 auto-convert a path value in the href attribute to an URL. They do this, just like all modern browsers.
But IE page doesn't see this auto-change. We just fix this by re-assining of the href baseTag.href = baseTag.href.

Second, IE7-5 do not produce auto-conversion of a path value to an URL value. We should do it manually.

There are other situations which slightly change IE behavior. This depends on

What DOCTYPE do you use.
How do you render you base tag - <base/>, <base></base> or <base>.
How your IE Enterprise Mode deals with IE Compatibility View setting.

For example if you have the IE Enterprise Mode set to IE8 with the Compatibility View set on then IE will set IE7 User-Agent HTTP header and ASP.NET Forms will be rendering for IE7.
Or the IE Conditional Comments will be ignored in case of pop-ups, frames, iframes or on common pages. These are all my real cases.

(function () {
    // Fixes old IE wrong behaiors of the href attribute of the base tag.

    var preventIeHrefIgnoring = function (baseTag) {
        var docMode = document.documentMode;
        var isIe = docMode;
        if (!isIe)
            return;
        if (docMode != 8 && docMode != 9)
            return;

        // IE8 and IE9 auto-convert path-like values of the href attribute, but do not apply it on the page.
        // It is fixed by re-assining.
        baseTag.href = baseTag.href;
    }

    var baseColl = document.getElementsByTagName('base');
    if (!baseColl.length)
        return;
    var baseTag = baseColl[0];

    var initialHref = baseTag.href;
    if (!initialHref)
        return;

    var hrefIsUrl = initialHref.indexOf("https://") == 0 || initialHref.indexOf("http://") == 0;
    if (hrefIsUrl) {
        preventIeHrefIgnoring(baseTag);

        return;
    }

    // Below we are dealing with IE7-5 only.

    var targetHref = initialHref.indexOf('/') == 0 ? initialHref : "/" + initialHref;

    var resultHref = window.location.protocol + "//" + window.location.host + targetHref;
    baseTag.href = resultHref;
})();

HTML TAG and local folder path with Internet Explorer

9 Answers9

Linked