관리 메뉴

플랫폼공작소 IT Blog

[하이브리드 앱] 자바스크립트로 뒤로 가기 제어!! 웹앱 본문

mobile/Cordova

[하이브리드 앱] 자바스크립트로 뒤로 가기 제어!! 웹앱

솜픽(Sompic) 플랫폼공작소 2017. 3. 14. 15:38

[안드로이드, 폰갭] 자바스크립트로 뒤로 가기 제어




첫번째 방법,


<script>

history.pushState(null, null, location.href)

window.onpopstate = function(event)

alert("여기에 작성하고 싶은 코드를 작성하면 됩니다!");

}

</script>


두번째 방법,


<script>

history.pushState(null, null, "#noback");

$(window).bind("hashchange", function(){

history.pushState(null, null, "#noback");

alert(1);

});

</script>


세번째 방법,

기능설명 : iframe으로 화면에 띄운 구조의 웹앱(/http://doctorson0309.tistory.com/a.jsp)일 경우,

하이브리드 html(예를들면, index.html)에서 아래의 코드를 입력하면

웹앱에서 먹던 history.back()등.. 뒤로가기 스크립트를 씹어버리고 

앱이 종료될 수 있는 하이브리드(Cordova)기능을 수행한다.


...

<div id="search_iframe"></div>

...


function onDeviceReady() {

document.addEventListener("backbutton", onBackKeyDown, true);

createIframe(); //아이프레임으로 띄운 상태

}


function onBackKeyDown() {

navigator.notification.confirm('앱을 종료하시겠습니까?', onBackKeyDownMsg, '메세지', '취소, 종료');

}


function onBackKeyDownMsg(button) {

if(button == 2) {

navigator.app.exitApp();

}

}


function createIframe(){

var listHtml = "";

listHtml+="<iframe id='iframe1' name='iframe1' style='border:none; frameborder='0'>"

  + "  </iframe>";

$('#search_iframe').append(listHtml);

document.uniqueKeyForm.action = "서버 URL";

document.uniqueKeyForm.target = "iframe1";

document.uniqueKeyForm.submit();

}



혹시 질문이 있다면 댓글 남겨주세요 ^  ^

도움이 되었기를 바랍니다!! 감사합니다. 


출처 : http://wp.galactica.co.kr/112

출처 : http://hangunsworld.com/blog/1920

0 Comments
댓글쓰기 폼