phonegap(cordova)從手機app跳轉到web頁面在跳轉回APP本地頁面思路

項目中需要用到 WAP支付寶支付。

但是 使用PHONEGAP開發 跳轉到支付寶支付，然后跳轉回來 就回不到APP的本地頁面，

就是使用WAP的第三方登錄也是一樣的。很難從WAP頁面在跳轉到 app本地的本地頁面

 

可以看下我的實現思路。

我是使用phongeap +jqmobi 做的

 

下面是 點擊去支付跳轉到 打開IFRAME的頁面

 <!-----第三方登錄------->
    <div id="qi_disanfang" class="panel padding0" data-header="default_head" data-footer="none" data-load="ondisanfang" data-unload="undisanfang">
        <iframe id="login_content" class="pay_content" style="height:100%;width:100%;border:0 none;" src=''></iframe>
    </div>

只是在頁面里面創建了一個IFRAME框，SRC為空

 

頁面初始化函數

/*第三方登錄*/
function ondisanfang(){
    //監聽消息狀態
    window.addEventListener('message',loginStart, false);
    //遠程wap頁面的地址
    var url=serverURL+'user.php?act=oath&type=qq&callblock=app/login.php';
    //賦值給iframe 的src 並設置iframe的寬高    
    document.getElementById("login_content").src = url;
    var $pay_content = $("#login_content");
    //var h = $pay_content.parent().height();
    // var w = $pay_content.parent().width();
    var h = screen.height-20;
    var w = screen.width;
    $pay_content.css({
        height: h,
        width: w
    });
}

loginStart 監聽消息回調函數

//消息回調函數
function loginStart(e) {
    //判斷傳過來的消息 是不是自己設置的，這個地方如果想嚴謹一點還可以判斷下 發消息的 域地址是不是自己的地址，我這里沒有判斷
    if(e.data=='login_success'){
        //如果是就執行自己的方法 跳轉到其它頁面或者做其它的操作
        window.location.href='home.html';
    }
}

頁面卸載函數

function undisanfang() {
    //刪除剛才的監聽
    window.removeEventListener('message',loginStart,false);
}

這樣這個打開遠程的iframe框就做好了，所有的wap遠程頁面都在這里操作。登錄。支付。當他們支付成功 都會 有一個 回調頁面。

這個回調頁面就是我們自己服務器的頁面，回調頁面里只需要發送一個消息給父窗口，讓我們剛才的監聽收到消息就可以了，可以在回調頁面做一個按鈕 來執行一個JS函數，也可以直接發送一個消息，具體看業務邏輯。

回調頁面JS

 <script type="text/javascript">
         //給iframe框的父窗口發送一個消息  這個消息內容要和剛才你監聽的內容一樣
         top.postMessage('login_success', '*');
  </script>

本文參考：http://www.imqiyu.com/mobile-application/23.html