HTML におけるベースタグの使用に関する詳細な説明

requireJS には、baseURL というプロパティがあります。baseURL を設定することで、現在のページではなく、プロジェクトを基準にして読み込むファイルパスを記述できます。

たとえば、プロジェクトディレクトリが /myproject/ で、その中に 2 つのページがあり、1 つは /myproject/one.html、もう 1 つは /myproject/html/other.html で、両方のページが /myproject/js/some.js を読み込む必要があるとします。 baseURL を /myproject/ に設定すると、js をロードするときに、ページパスが異なるために異なる相対パスを使用するのではなく、両方のページでプロジェクトに対する相対パス ./js/some を使用できます。

しかし、requireJS を使用しない場合、baseURL と同様の機能を実現できるでしょうか?

ベースタグ
実際、HTML には同様の機能を生成できる基本タグがあります。例えば：

コードをコピー

コードは次のとおりです。

相対パス ./images/logo_gray.gif を使用してロードした画像は、画像 http://static.cnblogs.com/images/logo_gray.gif になることがわかります。

ベースタグは、ページのリンクにデフォルトのパスまたはデフォルトの開く方法を追加できます。

デフォルトの開く方法を設定する例を次に示します。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<ベースターゲット="_blank" />
</head></p> <p><body>
<a href="http://www.cnblogs.com">このページは新しいウィンドウで開きます</a>
<a href="http://justany.cnblogs.com">このページも新しいウィンドウで開きます</a>
</本文>
</html>

バグ
ベースタグを動的に記述しないことをお勧めします。そうしないと、http://localhost/static/test.html のページのように、Firefox と IE で小さなバグが発生します。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<スクリプト>
document.write('<base href="http://localhost/" />');
</スクリプト>
</head></p> <p><body>
<img src="static/1.jpg" />
</本文>
</html>

Firefox と IE は、最初に http://localhost/static/static/1.jpg を読み込み、次に http://localhost/static/1.jpg を読み込みます。つまり、まず現在のページを基準としたパスで読み込みを試み、次にベースタグで設定されたデフォルトのパスで読み込みを試みます。

Chrome は正常に読み込まれます。

Firefox が正しく読み込まれません。

なぜ？

これについて、適切な説明が見つかりませんでした。私たちの分析では、ブラウザがリソースの読み込みを最適化しているため、動的に挿入されたベースタグが有効にならないときに、ブラウザがリソースを事前読み込みすることになります。その結果、エラーが発生し、その後、ベースタグが有効になり、正しいリソースが読み込まれます。

どうすれば回避できるでしょうか?ベースタグを動的に記述しなくても問題ありません。ベースタグを動的に記述する必要がある場合は、ページによって参照されるすべての外部リソースを JavaScript を通じて動的に読み込む必要があります。

<<: Vuex環境の詳細な説明

>>: Navicat 接続 MySQL エラーの説明分析