웹서버나 WAS를 쓰지 않고 html파일에 다른 html 파일을 삽입(include)을 하려고 jquery의 load 를 쓰게 되면 에러를 뿜어댄다.
그렇다. jquery의 load는 서버를 올린 뒤 해당 서버의 파일(ex.http://xxx)만을 찾고 로컬 파일을 로드 할 수 없는 문제가 생긴다.
이럴땐 고전의 document 객체에 구원의 손길을 뻗어본다..-_-;
'contents'라는 이름의 div안에 서버가 실행되지 않은 로컬 폴더의 다른 html 파일을 삽입(include)하려면 innerHTML도 좋은 방법중에 하나다.
아래의 예를 보자.
1. div 선언
<div id="contents" name="contents" ></div>
2. (예를들어) onClick 했을때 해당 div의 삽입(include)될 로컬 html 파일이 변경 되어야 할 경우 function을 생성해준다.
function menuClick(){
document.getElementById("contents").innerHTML='<object type="text/html" data="contents_01.html"></object>';
}
끝이다.
참쉽지 않은가?
가끔은 꼼수도 필요한 법...