글 작성 중 페이지 이탈 방지

기본적으로 글을 새로 작성하게 되면 자동 저장 기능이 동작합니다.

하지만 이 기능을 사용하지 않게 되면 페이지 이동시 열심히 작성한 글을 날려먹게 됩니다.

또한, 수정중에는 자동저장 기능이 동작하지 않아 글 작성하기가 힘이 듭니다.

 

이탈방지를 막는 기능이 기본으로 존재하면 좋겠다고 보입니다만 안 넣어주니 어쩔 수 없죠..

 

유료 애드온(게시물 작성 이탈 방지 애드온)이 존재합니다.

번거롭게 HTML 수정 하기 싫으시면 구매하셔서 사용하시면 됩니다.

 

beforeunload 스크립트를 이용하여 이탈을 방지하는 방법이며 글 등록 버튼을 눌렀을 때에는 동작하지 않습니다.

 


 

1. 글을 작성하는 위치에 아래의 스크립트 코드를 넣어줍니다.

<script type=”text/javascript”>

jQuery(document).ready(function($) {
var checkload = true;
$(“#submit-btn“).click(function () {
checkload = false;
});
$(window).on(“beforeunload”, function () {
if (checkload == true) return ‘저장되지않은 작성 중인 내용이 있습니다. 글쓰기 페이지에서 나가시겠습니까?’;
});
});

</script>

 

2. 글 등록 버튼에 ID명을 입력해줍니다.

예) <input type=”submit” value=”{$lang->cmd_registration}” id=”submit-btn”  />

 


 

ID명은 변경하셔도 되지만 XE에서 주로 사용되는 ID명을 사용하시게 되면 동작하지 않을 수 있습니다.

제대로 넣으셨다면 아래와 같이 글 작성 중 이동하게 되면 메시지가 출력됩니다.

 

스크린샷 2017-10-28 오후 7.26.06.png

 

브라우저마다 설정한 메시지가 나타나거나 브라우저 기본 메시지가 나타납니다.

(공통적으로 설정한 메시지가 나타날 수 있는 방법을 알게 되면 수정하도록 하겠습니다)

댓글 남기기