다른 HTML 파일에 HTML 파일 포함
이 기사에서는 HTML 파일에 HTML 파일을 포함하는 방법을 소개합니다.
jQuery load() 메서드를 사용하여 HTML 파일에 HTML 파일 포함
jQuery load() 메소드를 사용하면 서버에서 데이터를 로드할 수 있습니다. 선택한 컨테이너에 데이터가 표시됩니다. load() 메서드를 사용하여 현재 HTML 파일에 다른 HTML 파일을 포함할 수 있습니다. load() 메서드의 구문은 다음과 같습니다.
.load(url, data, callback);
load() 메소드는 로드할 URL을 첫 번째 매개변수로 사용합니다. 여기에는 두 개의 다른 매개변수 data와 callback 기능이 있으며 선택 사항입니다. data 매개변수는 요청을 처리하는 동안 서버에 보낼 데이터입니다. callback기능은 load() 메소드가 완료되면 실행됩니다.
jQuery를 실행하려면 HTML의 script 태그에 jQuery CDN을 사용해야 합니다. 예를 들어 CDN으로 이동하여 최신 버전의 jQuery에서 축소 옵션을 선택합니다. 그런 다음 코드를 복사하여 index.html 파일에 붙여넣습니다. 다음으로 HTML에서 ID가 anotherContent인 div를 만듭니다. 그런 다음 p 태그를 만들고 This is from index.html이라는 텍스트를 작성합니다. lake.html이라는 다른 HTML 파일을 만들고 This is from lake.html 단락을 작성합니다. index.html에서 jQuery 함수를 작성합니다. anotherContent id를 선택하고 lake.html을 매개변수로 사용하여 load() 메서드를 호출합니다.
index.html 파일을 실행하면 This is from lake.html이라는 텍스트도 볼 수 있습니다. 그러나 HTTP 서버에서 index.html 파일을 실행해야 합니다. 로컬 file 서버를 사용하여 현재 파일에 다른 파일(여기서는 lake.html)을 포함하면 Cross-Origin 요청이 차단됩니다. 이 문제를 해결하기 위해 index.html 파일의 디렉토리에서 다음 Python 명령을 사용하여 HTTP 서버를 만들 수 있습니다.
python3 -m SimpleHTTPServer 1337
그런 다음 http://localhost:1337에서 웹 페이지에 액세스할 수 있습니다. 따라서 jQuery를 사용하여 현재 HTML 파일에 다른 HTML 파일을 포함할 수 있습니다.
예제 코드:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
$(function(){
$("#anotherContent").load("lake.html");
});
</script>
<div id="anotherContent"></div>
<p>This is from index.html</p>
<p> This is from lake.html</p>
출력:
This is from lake.html
This is from index.html
JavaScript를 사용하여 HTML 파일에 HTML 파일 포함
JavaScript를 사용하여 HTML 파일에 HTML을 포함할 수 있습니다. jQuery를 사용하여 이 방법을 사용하는 이점은 파일 크기를 더 작게 만드는 jQuery 파일을 로드할 필요가 없다는 것입니다. JavaScript에서 템플릿 리터럴을 사용하여 HTML을 작성할 수 있습니다. HTML 파일에 JavaScript 파일을 포함하고 JavaScript 파일에 HTML을 작성하여 목표를 달성할 수 있습니다.
예를 들어 index.hmtl 파일에서 script 태그의 src 속성을 사용하여 lake.js 파일을 연결합니다. 본문 섹션에 This is from index.html 텍스트를 작성합니다. lake.js 파일에서 document.write()를 사용하여 HTML을 작성합니다. 템플릿 리터럴을 사용하여 메서드 내부에 HTML을 작성합니다. 즉, HTML 콘텐츠를 백틱으로 래핑합니다. 메소드 내부에 p 태그를 작성하고 This is HTML from lake.js라는 텍스트를 작성합니다.
출력 섹션에서 두 파일의 텍스트를 볼 수 있습니다. 따라서 JavaScript를 사용하여 HTML 파일에 HTML을 포함할 수 있습니다.
예제 코드:
<head>
<script src="lake.js "></script>
</head>
<body>
<p>This is from index.html</p>
</body>
document.write(`
<p>This is HTML from lake.js</p>
`);
출력:
This is HTML from lake.js
This is from index.html
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn