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

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

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

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

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

구현

1. Index.html 파일 만들기:

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


    <div>
<p><strong>2. header.html 및 footer.html 파일 만들기:</strong></p>
<pre class="brush:php;toolbar:false"><!-- 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 요소에 삽입합니다.

장점

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

• 재사용성: 머리글과 바닥글을 필요한 만큼 많은 HTML 페이지에 포함할 수 있으므로 반복적인 코딩이 필요하지 않습니다.
• 단순화된 유지 관리: 공유 섹션에 변경 사항이 있는 경우 한 위치에서 변경하고 전체에 반영할 수 있습니다.
• 프레임워크로부터의 독립성: 이 기술은 외부 프레임워크에 의존하지 않으므로 더 넓은 범위의 환경에서 액세스할 수 있습니다.

JavaScript를 활용합니다. 을 사용하면 웹사이트 디자인의 일관성과 유지 관리 가능성을 향상시키는 공통 머리글 및 바닥글 페이지를 쉽게 만들 수 있습니다.