header compatibility (헤더 호환성)

전 글에서 썼던 것과 같이 header 유동 통합을 하였다.

 

문제점

하지만 header.js로 header.html의 모든 요소들을 header에 모두 불러오고

base.js로 header의 요소를 수정하지 못하는 문제가 있었다.

+ 추가

user의 환경, 브라우저 마다 될 수도 안될 수 도 있는 문제

 

해결

문서가 모두 준비되었을 때 header.html를 모두 가져오고

이벤트를 발생시키고

base.js에서 그 이벤트가 감지가 되면 실행되는 함수를 추가하여 해결하였다.

 

// header.js
$(document).ready(function () {
    $.ajax({
        url: "/header.html",
        method: "GET",
        async: true,
        success: function(data) {
            $("header").html(data);
            $(document).trigger("headerLoaded");
        }
    });
});

'headerLoaded' 라는 트리거를 해서

//base.js
$(document).on("headerLoaded", function () {
    loginChanger();
});

base.js에서 감지를 해서 함수를 실행한다.