[js] html 외부 페이지 삽입

Edward Hyun·2022년 3월 29일
0

app&web-dev

목록 보기
98/178
post-custom-banner

1> iframe 사용

<html>
<body>
	<iframe src="http://opentutorials.org" width="500" height="500" sandbox></iframe>
</body>
</html>

2> jquery 사용

$(document).ready(function(){
    $(#header).load("/header.html");
    $(#footer).load("/footer.html");
});

3> 자바스크립트 AJAX 사용

<body>
     <div data-include-path="footer.html"></div>
 
    <script>
 
        window.addEventListener('load', function() {
            var allElements = document.getElementsByTagName('*');
            Array.prototype.forEach.call(allElements, function(el) {
                var includePath = el.dataset.includePath;
                if (includePath) {
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function () {
                        if (this.readyState == 4 && this.status == 200) {
                            el.outerHTML = this.responseText;
                        }
                    };
                    xhttp.open('GET', includePath, true);
                    xhttp.send();
                }
            });
        });
 
    </script>
</body>

출처 :: https://kyung-a.tistory.com/18

profile
앱&웹개발(flutter, vuejs, typescript, react), 인공지능(nlp, asr, rl), 백엔드(nodejs, flask, golang, grpc, webrtc, aws, msa, nft, spring cloud, nest.js), 함수형 프로그래밍(scala, erlang)을 공부하며 정리합니다.
post-custom-banner

0개의 댓글