{"id":6304,"date":"2019-03-12T20:37:50","date_gmt":"2019-03-12T11:37:50","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=6304"},"modified":"2020-05-28T12:44:37","modified_gmt":"2020-05-28T03:44:37","slug":"include-html","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=6304","title":{"rendered":"Include HTML"},"content":{"rendered":"<p>GIS\ub294 \ud558\ub098\uc758 \ud398\uc774\uc9c0\uc5d0\uc11c \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uad6c\ud604\ud558\ub294 \uacbd\uc6b0\uac00 \ub300\ubd80\ubd84\uc774\ub2e4. \uadf8\ub7ec\ub2e4\ubcf4\ub2c8 \uc0c8\ub85c\uc6b4 \ucee8\ud150\uce20\ub97c \ud45c\uc2dc\ud558\uae30 \uc704\ud574 \ud604\uc7ac \ud45c\uc2dc\ub418\ub294 \ud398\uc774\uc9c0(html)\uc5d0 \uc0c8\ub85c\uc6b4 Tag\ub97c \uc0dd\uc131\ud574\uc57c \ud55c\ub2e4. \ub9cc\uc57d ASP\ub098 JSP\uc640 \uac19\uc740 \uc11c\ubc84\uce21 \ud398\uc774\uc9c0 \uae30\uc220\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \uc624\ub85c\uc9c0 Javascript\ub9cc\uc744 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\ub77c\uba74 Javascript \ucf54\ub4dc\ub85c Tag \uc0dd\uc131\uc744 \uc704\ud574 \ub9e4\uc6b0 \uae34 \ubb38\uc790\uc5f4\uc744 \uae30\uc220\ud588\uc744 \uac83\uc774\ub2e4. \ub298 \uc774\ubd80\ubd84\uc774 \uac78\ub824\uc654\ub294\ub370.. \uc774\ubc88\uc5d0 \uc9c4\ud589\ud558\ub294 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 Javascript\uc758 \ubb38\uc790\uc5f4\uc744 \ud1b5\ud55c Tag\uc758 \uc0dd\uc131\uc774 \uc544\ub2cc HTML \ud30c\uc77c\uc744 \uc6d0\ud558\ub294 \uacf3\uc5d0 Include ! \ud558\ub294 \ubc29\uc2dd\uc744 \uc801\uc6a9\ud574 \ubcf8\ub2e4.<\/p>\n<p>\uadf8\uc911 \ud55c\uac00\uc9c0 \ubc29\ubc95\uc73c\ub85c W3School\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ubc29\uc2dd\uc778\ub370, \uc57d\uac04\uc758 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\uc744 \uac70\uce5c \ubc84\uc804\uc744 \uc815\ub9ac\ud574 \ubcf8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \ud558\ub098\uc758 \uba54\uc778 \ud398\uc774\uc9c0\uac00 \ub2e4\uc74c\uc758 DOM \uc694\uc18c\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\ub2e4\uace0 \ud558\uc790.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<div id=\"containerA\"><\/div>\r\n<div id=\"containerB\"><\/div>\r\n<\/pre>\n<p>\uc704\uc758 containerA\uc5d0\ub294 A.html\uc744, containerB\uc5d0\ub294 B.html\uc744 Include\ud574 \ubcf4\uace0\uc790 \ud558\ub294 \uac83\uc778\ub370.. \uba3c\uc800 A.html \ud30c\uc77c\uc758 \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<hr \/>\r\n<ol>\r\n    <li>\uc548\ub155\ud558\uc138\uc694!<\/li>\r\n    <li>Hello!<\/li>\r\n<\/ol>\r\n<hr \/>\r\n<\/pre>\n<p>B.html \ud30c\uc77c\uc758 \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<hr \/>\r\n<ul>\r\n    <li>\uc0ac\uacfc<\/li>\r\n    <li>\uade4<\/li>\r\n    <li>\ubc30<\/li>\r\n    <li>\ud3ec\ub3c4<\/li>\r\n<\/ul>\r\n<hr \/>\r\n<\/pre>\n<p>\uc774\uc81c \uc704\uc758 2\uac1c\uc758 html \ub9ac\uc18c\uc2a4(\ud30c\uc77c)\uc744 \uc6d0\ud558\ub294 DIV \uc694\uc18c\uc5d0 Include \ud558\ub294 \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nincludeHTML(document.querySelector('#containerA'), 'A.html');\r\nincludeHTML(document.querySelector('#containerB'), 'B.html');\r\n<\/pre>\n<p>includeHTML\ub77c\ub294 \ud568\uc218\ub294 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nfunction includeHTML(divContainer, urlHTML) {\r\n        let xhttp = new XMLHttpRequest();\r\n\r\n        xhttp.onreadystatechange = function () {\r\n        if (this.readyState == 4) {\r\n            if (this.status == 200) { divContainer.innerHTML = this.responseText; }\r\n            if (this.status == 404) { divContainer.innerHTML = \"Page not found.\"; }\r\n        }\r\n    }\r\n\r\n    xhttp.open(\"GET\", urlHTML, true);\r\n    xhttp.send();\r\n}\r\n<\/pre>\n<p>\uacb0\uacfc\ub294 \uc544\ub798\uc640 \uac19\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2019\/03\/includeHTML.png\" alt=\"\" width=\"1940\" height=\"986\" class=\"aligncenter size-full wp-image-6306\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>GIS\ub294 \ud558\ub098\uc758 \ud398\uc774\uc9c0\uc5d0\uc11c \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uad6c\ud604\ud558\ub294 \uacbd\uc6b0\uac00 \ub300\ubd80\ubd84\uc774\ub2e4. \uadf8\ub7ec\ub2e4\ubcf4\ub2c8 \uc0c8\ub85c\uc6b4 \ucee8\ud150\uce20\ub97c \ud45c\uc2dc\ud558\uae30 \uc704\ud574 \ud604\uc7ac \ud45c\uc2dc\ub418\ub294 \ud398\uc774\uc9c0(html)\uc5d0 \uc0c8\ub85c\uc6b4 Tag\ub97c \uc0dd\uc131\ud574\uc57c \ud55c\ub2e4. \ub9cc\uc57d ASP\ub098 JSP\uc640 \uac19\uc740 \uc11c\ubc84\uce21 \ud398\uc774\uc9c0 \uae30\uc220\uc744 \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uace0 \uc624\ub85c\uc9c0 Javascript\ub9cc\uc744 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\ub77c\uba74 Javascript \ucf54\ub4dc\ub85c Tag \uc0dd\uc131\uc744 \uc704\ud574 \ub9e4\uc6b0 \uae34 \ubb38\uc790\uc5f4\uc744 \uae30\uc220\ud588\uc744 \uac83\uc774\ub2e4. \ub298 \uc774\ubd80\ubd84\uc774 \uac78\ub824\uc654\ub294\ub370.. \uc774\ubc88\uc5d0 \uc9c4\ud589\ud558\ub294 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 Javascript\uc758 \ubb38\uc790\uc5f4\uc744 \ud1b5\ud55c Tag\uc758 \uc0dd\uc131\uc774 \uc544\ub2cc &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=6304\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Include HTML&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-6304","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/6304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6304"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/6304\/revisions"}],"predecessor-version":[{"id":9507,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/6304\/revisions\/9507"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6304"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}