Front
html에 html file을 inlcude하는 가장 쉬운 방법
728x90
안녕하세요. 말랑고양입니다.
프로젝트를 진행하던 도중, HTML에 HTML file을 include할 일이 있어서 포스팅하게 되었습니다.
약간 tiles 느낌.. 아무튼~!
아래의 소스코드를 참고하면 좋은 결과를 얻을 수 있을 것입니다.
1. content.html
1 2 3 4 5 6 7 8 | <a href="howto_google_maps.asp">Google Maps</a><br> <a href="howto_css_animate_buttons.asp">Animated Buttons</a><br> <a href="howto_css_modals.asp">Modal Boxes</a><br> <a href="howto_js_animate.asp">Animations</a><br> <a href="howto_js_progressbar.asp">Progress Bars</a><br> <a href="howto_css_dropdown.asp">Hover Dropdowns</a><br> <a href="howto_js_dropdown.asp">Click Dropdowns</a><br> <a href="howto_css_table_responsive.asp">Responsive Tables</a><br> | cs |
2. test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html> <body> <h1>My First HTML Include</h1> <header role="header" data-include="content.html"></header> <script src="http://code.jquery.com/jquery.min.js"></script> <script> $(function(){ includeLayout(); }) function includeLayout(){ var includeArea = $('[data-include]'); var self, url; $.each(includeArea, function(){ self = $(this); url = self.data("include"); self.load(url, function(){ self.removeAttr("data-include"); }) }) } </script> </body> <html> | cs |
서버에서 실행하지 않으면 (같은 URL내에서)
Cross site ~~ 그런거 걸릴 수 있으니 주의바랍니다
도움이 되셨다면 "공감" 버튼 한번씩 눌러주세요 ^ ^
추가로 궁금한 점이 있으시면 댓글 남겨주세요. 감사합니다.
#html include #html file html include #html script #jquery
반응형
'Front' 카테고리의 다른 글
| 15초 마다 html 새로고침이 일어나도록 처리 (0) | 2018.05.22 |
|---|---|
| firebase startAt 함수를 사용하는 가장 쉬운 방법 (0) | 2018.05.18 |
| html 또는 js 코드를 깔끔하게 정렬해주는 사이트 (0) | 2018.05.16 |
| [javascript] 오픈소스를 사용하여 쉽게 날짜 구하기 (0) | 2018.05.14 |
| [google firebase] how to firebase hosting init (0) | 2018.05.05 |
Contents
소중한 공감 감사합니다