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

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 には同様の機能を生成できる基本タグがあります。例えば:

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

<html>
<ヘッド>
<base href="http://static.cnblogs.com/" />
</head>
<本文>
<img src="./images/logo_gray.gif" />
</本文>
</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 エラーの説明分析

推薦する

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

Bash の山括弧の深い理解 (初心者向け)

序文Bash には、ls、cd、mv などの重要な組み込みコマンドが多数あるほか、grep、awk、...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

npmとcnpmを混在させる際の落とし穴の詳細な説明

目次原因理由NPM の紹介: CNPM の紹介:より良い方法方法の改善npm と cnpm を一緒に...

Vue.jsはシンプルなタイマー機能を実装します

この記事では、参考までに、簡単なタイマー機能を実装するためのvue.jsの具体的なコードを紹介します...

mysql データはどこに保存されますか?

MySQLデータベースの保存場所: 1. MySQLがMyISAMストレージエンジンを使用する場合...

CSS フロントエンドページレンダリング最適化属性 will-change の具体的な使用法

序文スクロールやサイズ変更などのスクロール イベントがトリガーされると、トリガーの頻度が非常に高くな...

サーバーストレステストの概念と方法 (TPS/同時実行性)

目次1 ストレステストの指標1.1 秒あたり1.2 クォータ1.3 平均処理時間(RT) 1.4 同...

MySQL の中国語ソートの詳細と例

MySQL の漢字ソートの詳細な説明デフォルトでは、MySQL は日付、時刻、および英語の文字列の並...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

CUDA8.0とCUDA9.0はUbuntu16.04で共存します

序文Github にある以前のコードには、CUDA 8.0 環境が必要なものもあります。初心者の場合...

JavaScript で Priority Queue を実装する

目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...

CSSセレクタを使用してラベルスタイルを設定するサンプルコード

CSS セレクターHTML タグにスタイルを設定すると、タグの属性を設定できます。 <div ...

CSS3 で作成したホバーズーム効果

結果:実装コード: html <link href='https://fonts.go...