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:

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?

user_390940 · Answer

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 .
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 - , or .
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 <base> TAG and local folder path with Internet Explorer

9 Answers