[JS+HTML] html안에 script로 공통요소 (div)가져오기 (+JS동작)

🟩 Frontend-HTML & CSS & +JS/🔰HTML & CSS & JQ

[JS+HTML] html안에 script로 공통요소 (div)가져오기 (+JS동작)

ramen2 2024. 9. 10. 16:36

| 목표

안경 낀 고양이 외의 요소(플레이리스트, 시계, 왼쪽 사이드의 고양이들 등) 들은

각 sub/ 의 html 안에서 공통적으로 쓰일 div이며,

js의 script 또한 동작해야함

| 방법

1. 공통으로 넣을 div를 가진, html 파일을 만듬 (common_widget.html)
⚠️ meta tag 빼고 div 알맹이만 가지는 파일이 돼야함 ⚠️

<!-- 공통 헤더 -->
<header>
     <div class="header_in">
          <p class="title">Insomnia's Room</p>
     </div>
     <div class="fullpage" id="fullscreenBtn"><i class="fas fa-expand"></i></div>
</header>



<!-- 시계 위젯 -->
<div class="draggable_clock">
     <i class="fas far fa-grip-lines"></i>
     <div class="clock_widget">
          <div class="time_hms" id="hour_min_sec"></div>
          <div class="time_pmam" id="pmam"></div>
     </div>

</div>

.... 그 외 div요소들

2. 공통으로 넣어질 html (common_widget.html) 파일의 css와 js를 만듬

(common.css /sub_common.js)

// 아래는 이해를 돕기위한, sub_common.js의 일부 js


// |￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣|
//     drag_box 1.시계위젯
// |＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿|
//    \ (•◡•) /


$(document).ready(function () {
     // drag_box_inner_btn의 li 클릭 이벤트 처리
     // 최초로 시계는 widget_active_clock가 붙어 있으니, 한 번 누르면 없애도록함
     $(".drag_box_inner_btn .box_clock").click(function () {
          let img = $(this).find("img");
          if (img.hasClass("widget_active_clock")) {
               img.removeClass("widget_active_clock");
          } else {
               img.addClass("widget_active_clock");
          }
     });
});

$(document).ready(function () {
     // .box_clock를 클릭할 때 .widget_active_clock 클래스를 토글하여 .draggable_clock의 display 속성을 변경
     $(".box_clock").click(function () {
          if ($(this).children('img').hasClass("widget_active_clock")) {
               $(".draggable_clock").css("display", "block");
          } else {
               $(".draggable_clock").css("display", "none");
          }
     });

3. 위에서 만든 공통으로 넣을 div를 가진 html을 넣을 html 파일(root_page.html)을 열고

아래에 1(공통요소 html)과 2(공통요소js) 를 넣을 script를 작성함

// root_page.html 내 코드
<body>
<!-- 공통 위젯이 들어갈 위치 -->
    <div id="common_widget"></div>
    
</body>


// 아래는 root_page.html 의 최하단 부분 script 불러오는 부분임

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
    <!-- jquery-ui-touch-punch -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js">
    </script>
    <!-- 이 위는 이해를 돕기위한, 원래 내가 쓰는 스크립트 파일 CDN이므로 아래만 참고바람 -->
    

    <script>
        // 공통 위젯을 로드하는 함수
        function loadCommonWidget() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    // 공통 위젯을 삽입할 위치에 내용을 넣습니다.
                    document.getElementById("common_widget").innerHTML = this.responseText;

                    // 공통 위젯이 로드된 후 sub_common.js 파일을 동적으로 로드합니다.
                    var script = document.createElement("script");
                    script.src = "../js/sub_common.js";
                    script.type = "text/javascript";
                    document.body.appendChild(script); // 스크립트를 body에 추가
                }
            };
            xhttp.open("GET", "/common_widget.html", true);
            // 공통 요소가 있는 파일 불러오기
            xhttp.send();
        }

        // 페이지가 로드될 때 공통 위젯을 로드합니다.
        window.onload = loadCommonWidget;
    </script>

아래 코드를 통해 공통요소 안에서 동작할 js (2번 파일) 를 가져오고

script.src = "../js/sub_common.js";
script.type = "text/javascript";

아래 코드를 통해 공통요소 html안의 div (1번 파일) 을 가져옴

xhttp.open("GET", "/common_widget.html", true);

CSS는 common.css로 작성했기 때문에 공통요소를 넣을 html 파일(root_page.html) 상단에 연결 해두어

적용가능!

| 결과

root_page.html 안에 불러와진 common_widget.html 내의 id, common_widget

처음에 공통위젯의 html 까지는 잘 가져왔는데

위젯의 공통 스크립트 가져오는걸,

<script src="../js/sub_common.js"></script>

이런식으로, html 파일내에

단순히 연결하려고 했어서 몇몇 코드는 동작하고 몇개는 동작을 안해서 고생했다..
(아예 안되는게 아니라, 몇몇코드는 동작해서 더 헷갈림)

위에 기술했듯, ⚠️공통위젯 로드하는 함수내에 ⚠️
공통 스크립트 가져오는 코드를 입력해야

정상적으로 가져올 수 있는거였당

script.src = "../js/sub_common.js";
script.type = "text/javascript";

저작자표시 비영리 변경금지

'🟩 Frontend-HTML & CSS & +JS > 🔰HTML & CSS & JQ' 카테고리의 다른 글

[유튜브] 유튜브 등록된 썸네일 가져오기 (+영상 가져오기) (0)	2024.09.18
[JS] 클릭,터치 이벤트 동작 안 할때 : (e.preventDefault() 로 중복이벤트 방지 (1)	2024.09.12
[CSS] IOS (크롬,사파리) 높이 값 못가지는 부분 해결 (line-height : 1 + flex로 정렬) (1)	2024.09.07
[Jquery] draggable 무한으로 드레그 될 때 영역제한하는 코드 (1)	2024.09.04
[JS] 동적으로 경로 추가하기 (window.location.pathname.includes('/sub/') ? '../' : ''; - 삼항연산자 활용) (0)	2024.09.02

현재글[JS+HTML] html안에 script로 공통요소 (div)가져오기 (+JS동작)

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

기록장