[JQuery] load

 

예전에 PHP를 사용해서 홈페이지를 만들때, include 자주 사용하였습니다.

PHP에서 include 는 현재 페이지에 외부의 페이지를 내용을 가져와서 사용하는 것입니다.

 

홈페이지에서 항상 고정되어 있는 메뉴 또는 하단에 정보를 매번 새로운 페이지에 넣지 않고, include 로 가져와서 포함만 시키면 되니 많이 편했습니다.

 

<?php include('page.php'); ?>

 

이번에 html5로만 코딩을 하다보니, PHP include 기능이 필요로 해서 찾아보던 중 JQuery에서 유사한 기능이 있어서 찾아보게 되었습니다.

 

 

1. 샘플 예제

 

테스트를 하기 위해 아래와 같이 예제를 만들었습니다.

아래 내용대로라면 아무 것도 없는 빈 페이지여야 합니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

<script>
$(function() {
    // 스크립트를 넣을 부분
});
</script>

 

 

여기에 추가로 넣을 별도의 파일을 만들어보겠습니다.

 

파일 명은 test.html 로 이미지만 넣도록 하겠습니다.

별도의 html 태그는 필요없습니다.

 

<img src="images/sample.png">

 

 

2. JQuery load

 

이제 JQuery load 에 대해서 알아보도록 하겠습니다.

 

참고 API :  http://api.jquery.com/load/

 

load 명령은 php include 와 같이 외부 html 문서 내용을 불러옵니다.

 

사용법은 간단합니다.

스크립트 부분에 아래와 같이 적어줍니다.

 

content 라는 ID를 가진 곳에 test.html 문서 안에 내용을 읽어와서 표시하라는 것입니다.

 

<script>
$(function() {
    $('#content').load('test.html');
});
</script>

 

위와 같이 한줄로 표시해 주면 끝납니다.

 

 

3. 결과

 

결과 화면을 html 코드를 나타낸 것입니다.

 

<html>
<head>
    <title>에프에이리눅스</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="content">
          <img src="images/sample.png">
    </div>
</body>
</html>

<script>
$(function() {
    $('#content').load('test.html');
});
</script>

 

메인 페이지를 수정하지 않아도, 외부의 html 페이지를 통해서 내용을 추가할 수 있습니다.

 

 

^ㅇ^!!!

 

JQuery 기능이 어디가 한계일까 궁금해지네요~^^

 
이 게시물을...