html in html - html에서 html을 불러오자~

티스토리 메뉴 펼치기 댓글수0

개발

html in html - html에서 html을 불러오자~

I am able to do that.
댓글수0

index.html 파일에

div의 id가 contents인 곳에

testContents.html 파일을 넣는다고 했을 때

쉽게 쓸수 있는 방법은 importJquery load 가 쉬울 것 같다.


1. impot 를 사용한 방법


index.html

<!DOCTYPE html>

<html>

<head>

  <link rel="import" href="testContents.html">

<!-- 

head에 link의 import를 사용하면 된다.

근데 link에서 import가 지원 안되면 사용 못한다. ㅜㅜ

브라우저에서 지원해 주는지 테스트는 어떻게 하냐면~ 

 'import' in document.createElement('link'); 해 보면 된다.

지원 되면 true 안되면 false 가 나온다.

-->

<script type="text/javascript">

function checkSupportsImport() {

console.log( 'import' in document.createElement('link') );

return 'import' in document.createElement('link');

}

if ( checkSupportsImport() ){

//지원되면 여기에 코딩

//import한 내용을 id="contents" 에 넣는 작업 하면된다.

}else{

//안되면 오류 처리를 여기 코딩

}

</script>

</head>

<body>

<div id="header">이부분은 헤더</div>

<div id="contents">

<!-- 여기는 다른 html파일을 넣자 -->

</div>

<div id="footer">이부분은 푸터</div>

</body>

</html>

이렇게 했을때 문제점은 index.html이 로딩되고 바로 testContents.html이 준비가 된다

그럼 testContents.html파일에 onload script가 있다면 이게 먼저 실행된다.

index.html이 전부 로딩되고 testContents.html가 원하는 때에

나오게 할려면 동적으로 link 처리를 해야 한다.

<!DOCTYPE html>

<html>

<head>

<!-- 

head에 link의 import를 script에서 처리한다.

-->

<script type="text/javascript">

function checkSupportsImport() {

console.log( 'import' in document.createElement('link') );

return 'import' in document.createElement('link');

}


if ( checkSupportsImport() ){

//여기서 부터 시작

var link = document.createElement('link'); //link element생성

link.rel = 'import'; //이건 꼭 써 줘야 된다. 안그럼 import안된다.

link.href = "testContents.html"; //읽을 파일

link.onload = function(e) {

//파일이 읽어지면 여기서 id="contents" 부분에 넣으면 된다.

//넣고 싶은 부분만 넣을 수도 있다.

var loadHtmlFile = this.import.querySelector('html'); 

var contents  = document.querySelector('#contents');

contents.appendChild(loadHtmlFile.cloneNode(true));

};

document.head.appendChild(link);

}else{

//안되면 오류 처리를 여기 코딩

alert("안된다 ㅜㅜ ");

}

</script>

</head>

<body>

<div id="header">이부분은 헤더</div>

<div id="contents">

<!-- 여기는 다른 html파일을 넣자 -->

</div>

<div id="footer">이부분은 푸터</div>

</body>

</html>

testContents.html

<!DOCTYPE html>

<html>

<head>

<title>include contents</title>

<script type="text/javascript">

//필요한 스크립트 넣자

</script>

</head>

<body>

<div id="import_contents">

<h2>hello~ world~~~</h2>

</div>

</body>

</html>

import는 이것 저것 할게 좀 많다.

그래서 더 편하고 쉽게 할려고 Jquery load를 사용한다.


2. Jquery load를 사용한 html in html

index.html

<!DOCTYPE html>

<html>

<head>

<!-- 

제일먼저 Jquery를 import한다. 로컬에 다운받은게 있으면 src부분에 경로지정해 주면 된다.

Jquery버전은 상관없다.

-->

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

//페이지가 로드되면 실행한다.

$(document).ready( function() {

$("#contents").load("testContents.html");

//~이렇게 한줄만 해주면 알아서 contents에 testContents.html파일을 넣어 준다.

});

</script>

</head>

<body>

<div id="header">이부분은 헤더</div>

<div id="contents">

<!-- 여기는 다른 html파일을 넣자 -->

</div>

<div id="footer">이부분은 푸터</div>

</body>

</html>

보다시피 Jquery load 를 쓰면 간단하게 끝~


맨위로

https://beableto.tistory.com/entry/html-in-html-html%EC%97%90%EC%84%9C-html%EC%9D%84-%EB%B6%88%EB%9F%AC%EC%98%A4%EC%9E%90

신고하기