Daily coding

CSS : include 사용해보기 본문

Front-end/Client

CSS : include 사용해보기

sunnnkim 2020. 1. 10. 16:41

https://www.w3schools.com/w3js/w3js_html_include.asp

 

W3.JS Includes

W3.JS HTML Includes Include an HTML file: w3.includeHTML() The HTML Save the HTML you want to include in an .html file: content.html HTML
CSS
www.w3schools.com

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script>
        function includeHTML() {
            var z, i, elmnt, file, xhttp;
            /*loop through a collection of all HTML elements:*/
            z = document.getElementsByTagName("*");
            for (i = 0; i < z.length; i++) {
                elmnt = z[i];
                /*search for elements with a certain atrribute:*/
                file = elmnt.getAttribute("w3-include-html");
                if (file) {
                    /*make an HTTP request using the attribute value as the file name:*/
                    xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function() {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                elmnt.innerHTML = this.responseText;
                            }
                            if (this.status == 404) {
                                elmnt.innerHTML = "Page not found.";
                            }
                            /*remove the attribute, and call this function once more:*/
                            elmnt.removeAttribute("w3-include-html");
                            includeHTML();
                        }
                    }
                    xhttp.open("GET", file, true);
                    xhttp.send();
                    /*exit the function:*/
                    return;
                }
            }
        };
    </script>
</head>

<body>
<!-- 편리하게 사용할 수 잇음 -->


    <div w3-include-html="./NewFile.html" style="background-color: red; width: 50%; height:200px"></div>
</body>
<script type="text/javascript">
    includeHTML();
</script>

</html>

'Front-end > Client' 카테고리의 다른 글

JQuery : JQuery 시작하기, 함수  (0) 2020.01.10
JQuery : JQuery 기본 및 임포트  (0) 2020.01.10
CSS : 배경이미지 반복  (0) 2020.01.10
CSS : Gradient 만들기 (linear-gradient)  (0) 2020.01.10
CSS : header 헤더 / main 메인 / footer 푸터 태그  (0) 2020.01.10
'Front-end/Client' Related Articles more