HTML中的base标识应用详解

在requireJS中,有1个特性叫baseURL,根据设定baseURL,大家能够将必须载入的文档相对路径写成相对新项目的,而并不是相对当今网页页面的。

比如:假定大家的新项目文件目录是/myproject/,里边有两个网页页面,1个是/myproject/one.html,另外一个是/myproject/html/other.html,她们都要载入/myproject/js/some.js。假如大家将baseURL设定成/myproject/,则大家在载入该js的情况下,这两个网页页面都可以以应用相对新项目的相对路径./js/some,而并不是由于网页页面的相对路径不一样而应用不一样的相对性相对路径。

可是假如不应用requireJS,大家能不可以完成相近于baseURL的作用呢?

base标识
实际上,HTML中有1个base标识,能够造成相近的作用。举个事例:

拷贝编码
编码以下:

<html>
<head>
<base href="http://static.cnblogs.com/" />
</head>
<body>
<img src="./images/logo_gray.gif" />
</body>
</html>

大家会发现,大家用相对性相对路径./images/logo_gray.gif载入的照片,却变为了http://static.cnblogs.com/images/logo_gray.gif的照片。

base标识能够给网页页面的连接再加默认设置的相对路径,或默认设置的开启方法。

下面是1个设定默认设置开启方法的事例:

拷贝编码
编码以下:

<html>
<head>
<base target="_blank" />
</head></p> <p><body>
<a href="http://www.cnblogs.com">这个网页页面会在新对话框开启</a>
<a href="http://justany.cnblogs.com">这个网页页面也会在新对话框开启</a>
</body>
</html>

1个BUG
base标识最好是不必动态性写入,不然在Firefox和IE中会有1个小bug,例如针对网页页面http://localhost/static/test.html:

拷贝编码
编码以下:

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

Firefox和IE中会先载入http://localhost/static/static/1.jpg,随后再载入http://localhost/static/1.jpg。也便是说,她们都先尝试用相对当今网页页面的相对路径开展载入,随后再根据base标识设定的默认设置相对路径载入。

Chrome的载入一切正常。

Firefox的载入不一切正常。

 

Why?

这个大家并沒有寻找很好的解释,大家的剖析是访问器对資源载入开展了提升,致使动态性插进base标识仍未起效时,就预先去载入了,結果错误,随后base标识起效因而又载入正确的資源。

 

怎样防止呢?没动态写入base标识那末就沒有任何难题。假如必须动态性写入base标识,那末网页页面全部引入的外界資源都必须根据Javascript动态性载入。