| site_link1 | |
|---|---|
| site_link2 | |
| site_link3 |
질문 : bootstrap에서 다른 html 페이지를 자신의 화면에 출력하는 방법은?
Bing이 다음과 같이 답을 주었다
Bootstrap은 자체적으로 다른 HTML 페이지를 출력하는 기능을 제공하지 않습니다.
그러나 JavaScript를 사용하여 다른 HTML 페이지를 로드하고 화면에 출력하는 것은 가능합니다.
JavaScript를 사용하여 다른 HTML 페이지를 로드하려면, 일반적으로 AJAX (Asynchronous JavaScript and XML) 기술이나 jQuery와 같은 라이브러리를 사용합니다.
이를 통해 다른 HTML 파일의 내용을 비동기적으로 가져와서 현재 페이지에 삽입할 수 있습니다.
다음은 jQuery를 사용하여 다른 HTML 페이지를 로드하고 현재 페이지에 출력하는 간단한 예시입니다:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 페이지 출력 예시</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 버튼을 클릭할 때 다른 페이지를 로드하여 출력합니다.
$('#loadPageBtn').click(function() {
$('#content').load('otherpage.html');
});
});
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap 페이지 출력 예시</h1>
<button id="loadPageBtn" class="btn btn-primary">다른 페이지 로드</button>
<div id="content"></div>
</div>
</body>
</html>
위 예시에서 loadPageBtn이라는 버튼을 클릭하면 content라는 <div> 요소에 otherpage.html의 내용이 로드되어 출력됩니다.
이를 통해 다른 HTML 페이지의 내용을 현재 페이지에 동적으로 표시할 수 있습니다.
이는 간단한 예시일 뿐이며, 실제로는 AJAX를 사용하여 더 복잡한 동작을 구현할 수 있습니다.
AJAX를 사용하면 서버와 비동기적으로 통신하여 데이터를 가져오고, 가져온 데이터를 적절히 처리하여 화면에 표시할 수 있습니다.
부트스트랩이 외부페이지를 동적으로 로드하여 화면에 출력하는 기능은 없다라는 사실을 바로 알 수 있었다
그리고 나는 부트스트랩 5 를 사용하기 때문에 jQuery를 사용하지 않고 바닐라 스크립트로만 구현된 예제를 다시 물어보았다
질문 : 위 예제를 바닐라 스크립트로 변환하면 어떻게 되지?
그리고 Bing 은 친절하게 다음과 같이 답을 주었다
jQuery를 사용하지 않고 바닐라 JavaScript로 위의 예제를 변환하는 방법은 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 페이지 출력 예시</title>
</head>
<body>
<div class="container">
<h1>Bootstrap 페이지 출력 예시</h1>
<button id="loadPageBtn" class="btn btn-primary">다른 페이지 로드</button>
<div id="content"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var loadPageBtn = document.getElementById('loadPageBtn');
var contentDiv = document.getElementById('content');
loadPageBtn.addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
contentDiv.innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'otherpage.html', true);
xhr.send();
});
});
</script>
</body>
</html>
위의 예제에서는 addEventListener를 사용하여 버튼 클릭 이벤트를 처리하고, XMLHttpRequest를 사용하여 AJAX 요청을 수행합니다.
XMLHttpRequest의 onreadystatechange 이벤트 핸들러를 등록하여 요청이 완료되면 응답 데이터를 가져와서 contentDiv의 innerHTML을 업데이트합니다.
이렇게 하면 jQuery를 사용하지 않고도 동일한 동작을 구현할 수 있습니다.
샘플을 돌려보니 군더더기없이 정확하게 돌아간다
만능 비서를 얻은 기분이다
