JavaScript를 사용하여 웹 페이지를 새로 고쳐야 하는 경우가 있습니다. 필요한 경우 위치 개체를 사용하여 reload()를 사용합니다. 방법.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="handleLoad()">
<button id="btn">Click Me!</button>
<script>
let arrayKittens = [ "https://placekitten.com/200/300", "https://placekitten.com/210/310", "https://placekitten.com/300/300", "https://placekitten.com/300/200", "https://placekitten.com/310/210", "https://placekitten.com/400/300"];
let button = document.querySelector("#btn");
button.style.display = "block";
button.style.margin = '20px 0px'
const handleClick = (e) => {
console.log("click")
location.reload(true);
}
button.addEventListener("click", handleClick);
let body = document.querySelector("body");
let image = document.createElement("img");
const handleLoad = (e) => {
console.log("loaded")
let random = Math.floor(Math.random() * arrayKittens.length);
let newImg = arrayKittens[random];
image.setAttribute("src", newImg);
image.setAttribute("width", "300");
image.setAttribute("height", "300");
image.setAttribute("alt", " arrayKittens[" + random + "]");
image.style.objectFit = "cover";
body.appendChild(image);
};
</script>
</body>
</html>
이 문서에는 두 개의 이벤트 리스너가 있습니다. 첫 번째는 <img />를 추가하기 위해 페이지가 로드될 때 발생합니다. DOM에. 두 번째는 reload()를 포함합니다. 함수. 사용자가 "Click Me!"를 클릭하면 handleClick()을 트리거하여 페이지가 다시 로드됩니다. 함수. 이 페이지는 JavaScript를 사용하여 거의 모든 로직을 처리합니다.
이 특정 예에서 고양이 사진 배열에서 임의의 고양이 사진은 페이지가 다시 로드될 때마다 표시됩니다.
전달된 true 또는 false 값은 페이지가 서버에서 다시 로드되는지 아니면 브라우저 캐시에서 다시 로드되는지 여부를 나타냅니다. 기본값은 캐시에서 페이지를 다시 로드하는 false이므로 서버에서 페이지를 다시 로드하려는 경우가 아니면 값을 전달할 필요가 없습니다.
그게 전부입니다!