Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML <base> TAG and local folder path with Internet Explorer

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?

like image 357
Przemysław Michalski Avatar asked Oct 13 '10 17:10

Przemysław Michalski


People also ask

Where do you put base tags in HTML?

There can only be one single <base> element in a document, and it must be inside the <head> element.

How do I find base URL?

To find the base URL of your website, go to the site's front page. What you see in the address bar on your site's front page is the base URL of your website.

What is BASE HREF in index HTML?

The href attribute specifies the base URL for all relative URLs on a page.

What is the base element in HTML?

The <base> HTML element specifies the base URL to use for all relative URLs in a document. There can be only one <base> element in a document. A document's used base URL can be accessed by scripts with Node.


4 Answers

Use an absolute URL:

<base href="http://yourdomain.com/MEDIA_FOLDER"/>
like image 77
Diodeus - James MacFarlane Avatar answered Sep 19 '22 14:09

Diodeus - James MacFarlane


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.

like image 24
Richard Connamacher Avatar answered Sep 20 '22 14:09

Richard Connamacher


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)

like image 9
Christian Burger Avatar answered Sep 22 '22 14:09

Christian Burger


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

like image 2
bobince Avatar answered Sep 21 '22 14:09

bobince