Details on how to use the base tag in HTML _ HTML/Xhtml _ webpage Creation

In requireJS, there is a property called baseURL. By setting baseURL, we can write the file path to be loaded as relative to the project, instead of relative to the current page in requireJS, there is a property called baseURL. By setting baseURL, we can write the file path to be loaded relative to the project, rather than relative to the current page.

For example, assume that our project directory is/myproject/, which contains two pages:/myproject/one.html and/myproject/html/other.html, they all need to load/myproject/js/some. js. If we set the baseURL to/myproject/, we can use the path relative to the project when loading the js. /js/some, instead of using different relative paths because of different page paths.

However, if requireJS is not used, can we implement functions similar to baseURL?

Base tag
In fact, there is a base tag in HTML that can generate similar functions. For example:

The Code is as follows:

We will find that the images loaded with the relative path./images/logo_gray.gif are converted into images at http://static.cnblogs.com/images/logo_gray.gif.

The base tag can be used to add the default path to the page Link or the default open mode.

The following is an example of setting the default open mode:

The Code is as follows:

This page will be opened in a new window
This page will also be opened in a new window

A BUG
It is best not to write the base tag dynamically, otherwise there will be a small bug in Firefox and IE, such as for the page http: // localhost/static/test.html:

The Code is as follows:

Script
Document. write ('');
Script

In Firefox and IE, http: // localhost/static/1.jpgis loaded first, and then http: // localhost/static/1.jpgis loaded. That is to say, they first try to load the path relative to the current page, and then load it through the default path set by the base tag.

Chrome loading is normal.

Firefox loading is abnormal.

Why?

We have not found a good explanation for this. Our analysis is that the browser has optimized the resource loading. As a result, the dynamically inserted base tag is not valid, so it is loaded in advance and the result is incorrect, then the base TAG takes effect and the correct resources are loaded.

How can we avoid it?If the base tag is not dynamically written, there is no problem. To dynamically write the base tag, all referenced external resources on the page must be dynamically loaded using Javascript.