새소식

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

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.