메뉴얼 같이 웹서버, 로컬서버없이 html을 만들어 사용할 때
데이터 및 html 로드하
index.html
<html>
<head>
<script src="./data.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
const testInput = document.getElementById('testInput')
const testBtn = document.getElementById('testBtn');
const testIframe = document.getElementById('testIframe');
console.log(window.data);
testBtn.addEventListener('click', e => {
testIframe.setAttribute('src', './'+testInput.value+'.html');
});
testBtn.click();
});
</script>
</head>
<body>
<input id="testInput" value="load1"/>
<button id="testBtn">load</button>
<iframe id="testIframe"></iframe>
</body>
</html>
data.js
var data = {
myData: "abcd",
mySub: "efgh"
};
load1.html
<html>
<head>
<link rel="stylesheet" href="./load1.css">
</head>
<body>
<div class="loadDiv" style="width: 100px; height: 100px"></div>
</body>
</html>
load1.css
.loadDiv {
background-color: #aaa;
}