JavaScript を使用して、複数の HTML ページに共通のヘッダーとフッターを含めるにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript を使用して、複数の HTML ページに共通のヘッダーとフッターを含めるにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-05 06:06:18

オリジナル

919 人が閲覧しました

How Can I Use JavaScript to Include Common Headers and Footers Across Multiple HTML Pages?

JavaScript を使用して複数の HTML ページに共通のヘッダーファイルとフッターファイルを含める

Web 開発では、多くの場合、次のような共通の要素を含める必要があります。複数の HTML ページにわたるヘッダーとフッターを使用して、一貫性と編成を維持します。これは、JavaScript を使用することで実現できます。

ヘッダーとフッターの組み込みに jQuery を使用する

共通のヘッダーファイルとフッターファイルを組み込む方法の 1 つは、jQuery を使用することです。この JavaScript ライブラリは、外部コンテンツを Web ページに読み込むためのシンプルかつ効率的な方法を提供します。

HTML ファイルの作成

このアプローチでは、3 つのファイルを作成する必要があります。 HTML ファイル:

index.html: メインコンテンツが含まれます
header.html: ヘッダーのコンテンツが含まれます。
footer.html: が含まれます。フッターコンテンツ。

index.htmlコード

<html>
<head>
  <title></title>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script>
    $(function() {
      $("#header").load("header.html");
      $("#footer").load("footer.html");
    });
  </script>
</head>
<body>
  <div>

ログイン後にコピー

header.html および footer.html コード

<!-- header.html -->
<a href="http://www.google.com">Click here for Google</a>

ログイン後にコピー

<!-- footer.html -->
<p>Copyright &copy; 2023</p>

ログイン後にコピー

ヘッダーとフッターの読み込み

HTML ファイルが作成されると、jQuery のload() メソッドは、header.html と footer.html のコンテンツをそれぞれ、index.html の #header 要素と #footer 要素に非同期でロードするために使用されます。

ユーザーがindex.html にアクセスすると、両方のヘッダーとフッターのコンテンツがページ上にレンダリングされるため、複数のページにわたって一貫性のあるユーザーエクスペリエンスが可能になります。

以上がJavaScript を使用して、複数の HTML ページに共通のヘッダーとフッターを含めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。