하이브리드 앱 뒤로가기 - haibeulideu aeb dwilogagi

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

첫번째 방법,

<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

�ȵ���̵� ����� ������ �ߴµ� �ڷΰ��� �ҽÿ� �̺�Ʈ�� �����ؾ� �ϴµ�
�Ʒ�ó�� �ϸ� ����������� ������ ������ �ۿ����� �ȵǴ°� �����ϴ�

  history.pushState(null, null, location.href);
        window.onpopstate = function(event) {
            //����
        }
�ۿ��� �����Ҽ� ���� ��Ȳ�Դϴ�.
Ȥ�� �ٸ� ����� ������ �ñ��մϴ�

• �亯ä����
  
  34%
• ��õ 0 �� ������ ������ �峪��?
• ����õ 0 �� ������ ������ �ȵ���.

을 넣으면 backbutton 이 있는 디바이스 (IOS 제외) 에서 이벤트를 잡아 내실 수 있습니다.
이후에 다양한 방법으로 backbutton 을 컨트롤해서 페이지를 나타내시면 될 것 같습니다.
참고로 저는 페이지마다 $(location).attr('href', '#home'); 방법으로
'#home' 이라는 링크를 붙이고 var hash = location.hash.replace(/^#/, '');  으로 hash 값을 체크하여 페이지를 구분하여 컨트롤하였습니다.

분명 더 쉬운 방법으로 페이지 이동하는 방법이 있지만 안드로이드나 IOS 와 다르게 이런 컨트롤을 저는 하나하나 해보았습니다.
물런 저는 결과적으로 시간이 많이 걸렸지만 덕분에 훨씬 창의적으로 다양한 방법을 생각해보고 문제를 해결할 능력이 향상되었다고 생각합니다^^
시간이 단축하시려면 아이오닉 프레임워크나 제이쿼리 모바일을 참고 하시는것도 좋은 방법이라고 생각합니다.

코르도바(cordova)는 웹기술로 디바이스 컨트롤을 가능하게 만들어줍니다.
backbutton  외에도 다양하게 디바이스를 컨트롤하는 메소드가 많이  있습니다.
아래 사이트에 가보시기 강추합니다~!

<!-- 뒤로가기 -->
<? 
if($bo_table == 'one' || ($bo_table == 'notice' && $wr_id == '')){
    $bstep = 1;
    if($bo_table == 'one' && $pn != 'write' && $is_write)
        $bstep = 3;
?>
<div id="header">
    <? if(!$is_ios_app || $pn != 'register_member'){?><span class="top_back" onclick="history.go(-<?=$bstep?>); return false;"><img src="<?php echo G5_THEME_URL ?>/mobile/shop/images/top_back.png" alt="" width="40"/></span><? } ?>
</div>
<? } ?>
<!-- 뒤로가기(페이지 이동) -->
<? 
$back_url = '';
if($bo_table == 'coop')
    $back_url = G5_THEME_URL.'/mobile/shop/09/option.php';
else if($pn == 'search_result')
    $back_url = G5_THEME_URL.'/mobile/shop/01/search_list.php';
if($pn == 'search_result' || $bo_table == 'coop'){
?>
<div id="header">
    <span class="top_back" onclick="location.href='<?=$back_url?>#'; return false;"><img src="<?php echo G5_THEME_URL ?>/mobile/shop/images/top_back.png" alt="" width="40"/></span>
</div>
<? } ?>