Javascript (자바스크립트) 페이지 이동 경고

HTML, JS, CSS를 분리해서 파일을 만들 경우 자바스크립트가 HTML이 로딩되기 이전에 실행되어 대상을 찾지 못 해 에러가 발생하는 경우가 있다. 이 때 자바스크립트를 HTML이 모두 로딩 된 이후에 실행되도록 해주면 문제를 해결할 수 있다.

 

최신 브라우저

window.onbeforeunload = function() {
  return false;
};

 

오래된 브라우저

window.onbeforeunload = function() {
  return "저장되지 않은 변경사항이 있습니다. 정말 페이지를 떠나실 건 가요?";
};

최신 브라우저에서는 사용자가 메시지를 설정해도 보여주지 않는다. 하지만 오래된 브라우저에서는 메시지가 비었다고 뜬다고 한다. 아마 아래꺼는 쓸 일이 없을 듯...

 

• DOMContentLoaded
• window.onload
• window.onunload
• window.onbeforeunload
• readyState

이벤트에 대한 자세한 내용은 다음 링크를 참고

ko.javascript.info/onload-ondomcontentloaded

DOMContentLoaded, load, beforeunload, unload 이벤트

 

만약, 페이지를 이동시가 아닌 특정 버튼을 누를 때만 작동하게 하고 싶다면 함수를 사용한다.

const registerCancel = () => {
	var cf = confirm("취소하시겠습니까?");
	if (cf) {
		location.href = "/main";
	} else {

	};
};

 

Tag. 페이지 뒤로가기 경고, 페이지 글쓰기 취소, 페이지 뒤로가기 팝업, 페이지 이동 경고, 페이지 이동 알람, 페이지 이동 팝업, 페이지 나가기 경고, 글쓰기 나가기 팝업, 글쓰기 나가기 경고, 글쓰기 뒤로가기 경고, 글쓰기 뒤로가기 팝업, domcontentloaded, dom contentloaded, dom load, dom beforeunload