Detailed explanation of the use of base tag in HTML_HTML/Xhtml_Web page production

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

For example: Suppose our project directory is /myproject/, there are two pages in it, one is /myproject/one.html, the other is /myproject/html/other.html, 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 relative to the project./js/some instead of using different relative paths because the paths of the pages are different. .

But if we don’t use requireJS, can we implement functions similar to baseURL?

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

Copy the code

The code is as follows:

We will find that we use relative paths./images The picture loaded by /logo_gray.gif has become the picture of http://static.cnblogs.com/images/logo_gray.gif. The

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

The following is an example of setting the default opening method:

Copy the code

The code is as follows:

This page will open in a new window
This page will also open 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:

Copy code

The code is as follows:

<script><br />document.write('<base href="http://localhost/" />');<br /></script>

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

Chrome loads normally.

Firefox is not loading properly.

Why?

We didn’t find a good explanation for this. Our analysis is that the browser has optimized resource loading, so when the dynamically inserted base tag does not take effect, it is loaded in advance. The result is an error, and then the base tag takes effect. The correct resources are loaded again.

How to avoid it? If you don’t dynamically write the base tag, there will be no problem. If you need to write the base tag dynamically, then all external resources referenced by the page need to be dynamically loaded through Javascript.