JQuery html 파일 추가 - jQuery html pail chuga

Question

목차 Show

공부한것들을 정리하는 블로그 입니다.
Canco(ding)
jquery를 이용한 html 파일 로드 방법(header 파일 삽입 방법)

공부한것들을 정리하는 블로그 입니다.

방법1.

999_test1.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
      $(document).ready(function(){
         $("#header").load("999_test2.html")
        /* id 지정을 통해서도 가능합니다. 
         $("#header").load("header.html #navbar")
         */       
      });
</script>    
</head>

<body>
	<h2>before</h2>
    <div id="header"><h2>include</h2></div>
</body>


</html>

999_test2.html

<div id="navbar">
	<ul class="nav">
		<li><a href="#">munu1</a></li>
		<li><a href="#">menu2</a></li>
		<li><a href="#">menu3</a></li>
	</ul>
</div>

캡처

- 적용전

- 적용후

파일첨부

999_test1.html

0.00MB

999_test2.html

0.00MB

방법2.

998_test1.html

<html>
<head>
 <title>Include Sample</title>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript" src="998_test1.js"></script>
 <script type="text/javascript">
  function headerCompleted() {
   $("#sample").html("haha");
  }
  function footerCompleted() {
   $("#sample2").html("hoho");
  }
 </script>
</head>
<body>
 <!-- "include-html" 태그의 "target" 속성에 대치시킬 파일을 지정해준다. -->
 <include-html target="998_test2.html" completed="headerCompleted"></include-html>
 <div>Contents</div>
 <include-html target="998_test3.html" completed="footerCompleted"></include-html>

 <script>includeHtml();</script>
</body>
</html>

998_test1.js

function includeHtml() {
 $("include-html").each(function() {
  element = $(this);
  element.load(element.attr("target"), eval(element.attr("completed")));
 });
}

998_test2.html

<div>Header</div>
<div id="sample"></div>

998_test3.html

<div>Footer</div>
<div id="sample2"></div>

캡처

- 적용전

- 적용후

파일첨부

998_test1.html

0.00MB

998_test1.js

0.00MB

998_test2.html

0.00MB

998_test3.html

0.00MB

Canco(ding)

[ 🎁 javascript ]

harrydony 2021. 7. 16. 09:55

728x90

반응형

<div class="header_html"></div>
<div class="footer_html"></div>

<script>
        $(function () {
            $('.header_html').load('header.html');
            $('.footer_html').load('footer.html');
        });
</script>

728x90

반응형

저작자표시

'javascript' 카테고리의 다른 글

swiper 참고 사이트 (0)	2021.07.20
차트 리스트 참고 링크 (0)	2021.07.19
[ jquery ] jquery replace 사용법, 정규식 사용법 (0)	2021.07.09
스크롤을 화면 제일 하단에 위치시키는 방법 (0)	2021.07.08
스크롤 이동 사용법(scroll) (0)	2021.07.08