JavaScript를 사용하여 여러 HTML 페이지에 공통 머리글과 바닥글을 포함하려면 어떻게 해야 합니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 여러 HTML 페이지에 공통 머리글과 바닥글을 포함하려면 어떻게 해야 합니까?

Patricia Arquette

풀어 주다： 2024-12-05 06:06:18

원래의

918명이 탐색했습니다.

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

JavaScript를 사용하여 여러 HTML 페이지에 공통 머리글 및 바닥글 파일 포함

웹 개발에서는 다음과 같은 공통 요소를 포함해야 하는 경우가 많습니다. 일관성과 구성을 유지하기 위해 여러 HTML 페이지에 걸쳐 머리글과 바닥글을 포함합니다. 이는 JavaScript를 사용하여 달성할 수 있습니다.

머리글 및 바닥글 포함을 위해 jQuery 사용

공통 머리글 및 바닥글 파일을 포함하는 한 가지 방법은 jQuery를 사용하는 것입니다. 이 JavaScript 라이브러리는 외부 컨텐츠를 웹 페이지에 로드하는 간단하고 효율적인 방법을 제공합니다.

HTML 파일 생성

이 접근 방식을 위해서는 세 가지를 생성해야 합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!