includeJS.html
<head>
<meta charset="UTF-8">
<title>include JS</title>
<script src="includeHtml.js"></script>
</head>
<body>
<!-- 특정파일 불러오기 -->
<!-- 만들어놓은 div에 불러오기 -->
<div w3-include-html="NewFile.html"
style="background-color: red; width: 50%; height: 200px"></div>
<script type="text/javascript">
includeHTML();
</script>
</body>
NewFile.html(table 형식)
<head>
<meta charset="UTF-8">
<title>NewFile.html</title>
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<table style="width: 100%; height: 100%" border="1">
<tr style="width: 50%">
<td style="width: 50%">hello</td>
<td style="width: 50%">world</td>
</tr>
<tr style="width: 50%">
<td style="width: 50%">hi</td>
<td style="width: 50%">good</td>
</tr>
</table>
</body>
includeHtml.js(
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;
}
}
};'CSS' 카테고리의 다른 글
| css 파일모음 (0) | 2020.07.15 |
|---|---|
| font// 폰트 정리 (0) | 2020.07.14 |
| CSS 테이블 다루기 (0) | 2020.07.13 |
| CSS div 다루기 (0) | 2020.07.13 |
| 단어 여백설정, 정렬 (0) | 2020.07.13 |
