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 エラーの説明分析

推薦する

Tomcat プロセスの CPU 使用率が高い場合のトラブルシューティング記録を記録する

この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...

HTML 基本要約推奨事項 (タイトル)

HTML: タイトル見出しは <h1> - <h6> などのタグによって定...

Linuxは数字当てゲームのソースコードを実装する

シンプルな Linux 推測ゲームのソースコードゲームのルール:数字当てゲームは通常 2 人でプレイ...

JavaScript の基礎: 即時実行関数

目次関数フォーマットを即時実行関数を即座に実行する他の方法 – 式即時実行される関数はパラメータを取...

さまざまなHTTPリターンステータスコードの詳細な説明

サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...

Nginxホットデプロイメントの実装

目次セマフォNginx ホットデプロイメント上記のブログ投稿に従ってください。ファイアウォールをオフ...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

nginx ロケーション優先度の詳細な説明

場所表現タイプ~ は大文字と小文字を区別して通常の一致を実行することを示します~*は大文字と小文字を...

JavaScriptはブラウザがIEかどうかを判定します

フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

Linux でスワップ領域を確認する 5 つのコマンドの概要

序文Linux では、スワップ パーティションとスワップ ファイルの 2 種類のスワップ領域を作成で...

MySQL 5.7 解凍版のインストール、アンインストール、および文字化けしたコードの問題のグラフィック解決

1. 解凍版のインストール(1)圧縮パッケージをダウンロードし、ディスクの場所に解凍します。圧縮パッ...

MySQL の CPU 負荷が高い問題のトラブルシューティング

MySQL による CPU 負荷の上昇今日の午後、MySQL によってサーバーの負荷が高くなる問題を...

MySQL ディープページング問題の解決の実践記録

目次序文ディープページングを制限すると遅くなるのはなぜですか?サブクエリによる最適化B+ツリー構造の...

MySql のクラッシュとサービスの起動失敗の解決策

私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...