Detailed explanation of the use of base tag in HTML

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

For example: suppose our project directory is /myproject/, and there are two pages in it, one is /myproject/one.html, the other is /myproject/html/other.html, and they both need to load /myproject/js/some.js. If we set the baseURL to /myproject/, then when we load the js, both pages can use the path ./js/some relative to the project, instead of using different relative paths because of different page paths.

But if we don't use requireJS, can we achieve functionality similar to baseURL?

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

Copy code

The code is as follows:

We will find that the image we loaded using the relative path ./images/logo_gray.gif becomes the image http://static.cnblogs.com/images/logo_gray.gif.

The base tag can add a default path or a default opening method to the link of the page.

Here is an example of setting the default opening method:

Copy code

The code is as follows:

<html>
<head>
<base target="_blank" />
</head></p> <p><body>
<a href="http://www.cnblogs.com">This page will open in a new window</a>
<a href="http://justany.cnblogs.com">This page will also open in a new window</a>
</body>
</html>

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:

Copy code

The code is as follows:

<html>
<head>
<script>
document.write('<base href="http://localhost/" />');
</script>
</head></p> <p><body>
<img src="static/1.jpg" />
</body>
</html>

Firefox and IE will load http://localhost/static/static/1.jpg first, and then load http://localhost/static/1.jpg. That is, they all try to load it with a path relative to the current page first, and then load it with the default path set by the base tag.

Chrome loads fine.

Firefox is not loading properly.

Why?

We haven't found a good explanation for this. Our analysis is that the browser optimizes resource loading, which causes the browser to pre-load resources when the dynamically inserted base tag does not take effect. As a result, an error occurs, and then the base tag takes effect and loads the correct resource.

How to avoid it? There will be no problem if you do not write the base tag dynamically. If you need to write the base tag dynamically, all external resources referenced by the page need to be loaded dynamically through Javascript.

<<: Detailed explanation of Vuex environment

>>: Navicat connection MySQL error description analysis