출처 : https://ktko.tistory.com/m/109
팝업창 하루동안 열지 않기 & 하루에 한번만 띄우기 구현하기
자바스크립트를 사용해 팝업창을 띄우는 것은 자바스크립트에서 제공하는 window객체를 사용하면 간단하게 만들 수 있습니다.
많은 사이트에서 사이트에서 제공하는 이벤트와 제품홍보를 위해 팝업창을 방문자들에게 수없이 띄우지만 방문자들은 사이트에 방문할 때마다 팝업 닫는 것이 상당히 귀찮다. 그래서 하루동안 팝업을 보지 않기 라는 기능을 제공하고 있습니다.
이 기능을 사용하려면 자바스크립트의 쿠키와 윈도우 객체의 open만 알아야 합니다.
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function getCookie(name) {
var cookie = document.cookie;
if (document.cookie != "") {
var cookie_array = cookie.split("; ");
for ( var index in cookie_array) {
var cookie_name = cookie_array[index].split("=");
if (cookie_name[0] == "popupYN") {
return cookie_name[1];
}
}
}
return ;
}
function openPopup(url) {
var cookieCheck = getCookie("popupYN");
if (cookieCheck != "N")
window.open(url, '', 'width=450,height=750,left=0,top=0')
}
</script>
</head>
<body onload="javascript:openPopup('popup.html')">
</body>
</html>
소스 설명
먼저 메인화면 진입 할 때 <body onload="javascript:openPopup('popup.html')">에서 openPopup 메서드를 실행하게 됩니다. onload()는 모든 콘텐츠(css, 스크립트, 이미지)가 로드 된 후 발생하는 이벤트입니다.
메소드에서는 openPopup() 안에는 getCookie함수를 호출하게 되고 getCookie함수에서는 popupYN이라는 이름의 쿠키를 조회하여 값을 리턴합니다.
만약 쿠키의 값이 N이 아닐경우에는 팝업을 호출하게 됩니다.
popupYN이라는 쿠키네임의 value값은 어디서 set을 하게 되냐면 팝업창(popup.html)에서 하게 됩니다. 팝업창에서 하루에 한번만 보기를 체크할 경우 popupYN=N으로 쿠키를 설정하게 됩니다. 그리고 현재 시간을 가져와 현재 시간에 + 1을 하여 다음 날까지 쿠키를 로컬에 저장해 두었다가 24시간이 지나면 쿠키가 자동으로 삭제할 수 있게 expires에 대입합니다.
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script language="JavaScript">
function setCookie(name, value, expiredays) {
var date = new Date();
date.setDate(date.getDate() + expiredays);
document.cookie = escape(name) + "=" + escape(value) + "; expires=" + date.toUTCString();
}
function closePopup() {
if (document.getElementById("check").value) {
setCookie("popupYN", "N", 1);
self.close();
}
}
</script>
</head>
<body>
<input type="checkbox" id="check" onclick="closePopup();">
<br />
<fontsize=3> <b>하루에 한번만 보기</b> </font>
</body>
</html>
'웹개발 > js' 카테고리의 다른 글
| Javascript 화면 캡쳐 [html2canvas] (0) | 2022.10.17 |
|---|---|
| 쿠키 사용하기. (0) | 2022.02.18 |
| JavaScript 키보드 이벤트 생성 (0) | 2022.02.17 |
| Javascript에서 DOM의 특정 요소(element) 찾는 방법 (0) | 2022.02.17 |
| javascript / ajax 배열 request 전송 및 java에서 받기 (1) | 2021.08.11 |
댓글