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

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

DDD

풀어 주다： 2024-12-02 14:43:11

원래의

760명이 탐색했습니다.

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

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

웹 개발 영역에서는 여러 HTML 페이지에 공통되는 머리글 및 바닥글 섹션을 만들어야 하는 경우가 많습니다. HTML 페이지. 이는 페이지 생성을 간소화할 뿐만 아니라 웹사이트 디자인의 일관성도 보장합니다.

JavaScript를 사용하여 머리글 및 바닥글 파일 포함

이 작업은 다양한 프레임워크를 사용하여 수행할 수 있지만, HTML과 JavaScript만 사용해도 이를 효과적으로 수행할 수 있습니다. DOM 조작 및 비동기 요청을 단순화하는 강력한 JavaScript 라이브러리인 jQuery를 입력하세요.

구현

1. 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>

로그인 후 복사

2. header.html 및 footer.html 파일 만들기:

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

<!-- footer.html -->
<a href="http://www.google.com">click here for google</a>

로그인 후 복사

설명

index.html 파일에는 머리글과 바닥글 div가 포함되어 있습니다. jQuery의 load() 메서드를 사용하여 채워집니다. jQuery 스니펫은 페이지가 로드될 때 실행되고 header.html 및 footer.html의 콘텐츠를 비동기적으로 검색하여 해당 div 요소에 삽입합니다.

장점

이 접근 방식은 여러 가지를 제공합니다. 이점: