[Cordova] 處理上一頁 (back) 按鈕事件

[Cordova] 處理上一頁 (back) 按鈕事件

上次將舊的 HTML+CSS+JS Android app 移到 Cordova之後,

有提到遇到幾個問題,其中一個就是 Back 按鈕的問題~

按下 Back (上一頁)按鈕時,

會讓我的 app 在不想要可以回上一頁時,也回到了上一頁,

然後在沒有上一頁可回的狀態下,就會直接關閉程式…

 

我想要把它恢復成:

  – 只有在特定的頁面按下 Back 才能回上一頁

  – 在其他的頁面按下 Back 就跳出對話框,確認是否關閉程式

 

以下是參考資料:

Cordova Events: backbutton

stackoverflow: PhoneGap – android exit on backbutton

如何監聽 Android 實體 back 按鈕並離開 App

MDN: Using Content Security Policy

 

1.  在 <head> 裡面加入必要的 meta 與 js

首先把 HelloWorld 專案裡的 index.html 打開來參考一下~

可以看到裡面有設定一些 meta tag,同時也引用了 cordova.js,

這些都要加到 html 檔的 <head> 裡,才能使用 Cordova 的 API

<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="cordova.js"></script>

 

至於這個 cordova.js 是哪來的呢?

在 cordova build 或是 cordova run 的時候,

Cordova 會把這個 cordova.js 放到編譯好的 app 裡面,

因此在 www 的路徑下就可以直接存取得到~

 

舉例來說,看一下編譯出來的 android-debug.apk,

就可以看到 www 目錄下多了好幾個 cordova 開頭的檔案:

testuser@localhost ~/Cordova/MultiLibraryLogin $ unzip -l platforms/android/build/outputs/apk/android-debug.apk
Archive:  platforms/android/build/outputs/apk/android-debug.apk
Length     Date   Time    Name
--------    ----   ----    ----
.......................................
.......................................
1322  07-15-15 00:31   assets/www/cordova-js-src/android/nativeapiprovider.js
1441  07-15-15 00:31   assets/www/cordova-js-src/android/promptbasednativeapi.js
10699  07-15-15 00:31   assets/www/cordova-js-src/exec.js
3490  07-15-15 00:31   assets/www/cordova-js-src/platform.js
4005  07-15-15 00:31   assets/www/cordova-js-src/plugin/android/app.js
64069  07-15-15 00:31   assets/www/cordova.js
362  07-15-15 00:31   assets/www/cordova_plugins.js
.......................................
.......................................
5249  07-12-15 23:48   res/drawable-hdpi-v4/icon.png
216014  07-12-15 23:48   res/drawable-land-hdpi-v4/screen.png
41538  07-12-15 23:48   res/drawable-land-ldpi-v4/screen.png
90490  07-12-15 23:48   res/drawable-land-mdpi-v4/screen.png
488469  07-12-15 23:48   res/drawable-land-xhdpi-v4/screen.png
2239  07-12-15 23:48   res/drawable-ldpi-v4/icon.png
3236  07-12-15 23:48   res/drawable-mdpi-v4/icon.png
220338  07-12-15 23:48   res/drawable-port-hdpi-v4/screen.png
41064  07-12-15 23:48   res/drawable-port-ldpi-v4/screen.png
92429  07-12-15 23:48   res/drawable-port-mdpi-v4/screen.png
501006  07-12-15 23:48   res/drawable-port-xhdpi-v4/screen.png
6814  07-12-15 23:48   res/drawable-xhdpi-v4/icon.png
6814  07-12-15 23:48   res/drawable/icon.png
2544  07-15-15 00:31   res/xml/config.xml
2608  07-15-15 00:31   resources.arsc
133712  07-12-15 23:48   classes.dex
7901  07-15-15 00:31   META-INF/MANIFEST.MF
7930  07-15-15 00:31   META-INF/CERT.SF
1203  07-15-15 00:31   META-INF/CERT.RSA
--------                   -------

 

2. 攔截 Back 按鈕事件

在 Cordova 裡面,要先註冊一個 deviceready 的事件,

等收到這個事件之後,才能再註冊其他 Cordova 相關的事件~

$(function() {
// Add event listener for Cordova device ready
document.addEventListener("deviceready", function() {
// Register the event listener
document.addEventListener("backbutton", function(e) {
if (location.href.indexOf("/options.html") >= 0 ||
location.href.indexOf("/popup.html") >= 0)
{
if (confirm("確定離開程式嗎?"))
{
navigator.app.exitApp();
}
}
}, false);
}, false);
});

 

上面的程式在收到 deviceready 事件後,就去註冊了 backbutton 的事件,

因此接下來按下 Back 按鈕的動作就會被我們攔截~

程式這邊的處理是,如果現在是 options.html 或是 popup.html,

這是在我們的 app 裡面,因此就視為要離開 app,

利用 confirm() 跳出一個對話框,詢問使用者是否確定要退出~

Screen Shot 2015-07-15 at 12.50.57 AM  

 

如果不是 options.html 或 popup.html 的話,

那可能是已經在外部網頁,這時不做任何處理的話,

就會走 Cordova 預設的 Back 按鈕動作,也就是回到網頁的上一頁~

 

經過上述的修改後,Back 按鈕算是回復我原本 app 的設計囉~

 

(本頁面已被瀏覽過 922 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料