iframe 을 이용하여 페이지 전체 이동없이 원하는 페이지만 로드해보자.

이건 너무나 간단해서 길게 설명을 않해도 될것같다. 일반적으로 iframe 은 아래와 같은 방법으로 사용한다.

<iframe width="1024" height="500" src="http://b.redinfo.co.kr"></iframe>

대충 감이 올 수 있겠지만, iframe 의 src 속성값을 변경할 수 있다면, 클릭하나로 계속 싸이트의 주소를 변경하여, 페이지의 전체적인 이동없이, iframe 안에 원하는 페이지만 변경시킬 수 있다. 예제와 관련된 소스는 아래와 같다. 

 전체페이지 이동없이 iframe 안의 페이지만 이동하는 예제

---

<!-- jquery 를 사용하기 위해 jquery 파일을 로드 -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(e) {
/* a요소를 클릭 했을 시 */
    $('a').click(function(){
/* iframe 요소의 src 속성값을 a 요소의 data-url 속성값으로 변경 */ 
        $('#iframe').attr('src',$(this).attr('data-url'));
        })
});
</script>

<a  data-url="http://naver.com">네이버</a>
<a data-url="http://daum.net">다음</a>
<a  data-url="http://nate.com">네이트</a>
<iframe id="iframe" width="1024" height="500" src="http://b.redinfo.co.kr"></iframe>

위의 예제에서는 간단하게 페이지만 로드하는 형식이지만, 자신의 도메인일 경우 GET 메소드 이용하여, 좀더 기능성이 있는 웹을 만들 수 도 있다.