html 안에 html 불러오기
본문
고수님들 도와주세요.
clock.html만 동작시킬때는 잘되는데
아래와 같이 아이프레임으로 불러와도 시계가 표시되지 않습니다.
제컴에서(윈도우즈 로칼이라고 하더군요) 테스트 중이고요.
앞으로도 현장 로칼 c:\\에서 실행 시키고자 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Room</title>
<style>
body {
margin: 0;
overflow: hidden;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: fade 1s infinite alternate;
}
@keyframes fade {
0% {
opacity: 50;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<script>
var index = 0; // 이미지에 접근하는 인덱스
window.onload = function () {
slideShow();
}
function slideShow() {
var i;
var x = document.getElementsByClassName("slide1"); // slide1에 대한 DOM 참조
for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; // 처음에 전부 display를 none으로 한다.
}
index++;
if (index > x.length) {
index = 1; // 인덱스가 초과되면 1로 변경
}
x[index - 1].style.display = "block"; // 해당 인덱스는 block으로
setTimeout(slideShow, 2000); // 함수를 4초마다 호출
}
</script>
<div>
<img class="slide1" src="c:\\display\a.jpg">
<img class="slide1" src="c:\\display\b.jpg">
<img class="slide1" src="c:\\display\c.jpg">
<iframe src="c:\\display\clock\clock_a.html" style="width: 100%; height: 300px;"></iframe>
</div>
테스트 중
</body>
</html>
답변 2
루트에서 불러오고 싶다고 하셔는데요 그렇다면 clock_a.html 파일을 루트에 넣어주세요
그리고
<iframe src="/clock_a.html" style="width: 100%; height: 300px;"></iframe>
이렇게 하시면됩니다.
만약 이래도 해결이 않된다면 개발자모드 f12 에서 에러 코드를 보여 주세요
<iframe src="clock_a.html" ~