[Cordova] 處理上一頁 (back) 按鈕事件
上次將舊的 HTML+CSS+JS Android app 移到 Cordova之後，
有提到遇到幾個問題，其中一個就是 Back 按鈕的問題～
按下 Back (上一頁)按鈕時，
會讓我的 app 在不想要可以回上一頁時，也回到了上一頁，
然後在沒有上一頁可回的狀態下，就會直接關閉程式…
我想要把它恢復成：
– 只有在特定的頁面按下 Back 才能回上一頁
– 在其他的頁面按下 Back 就跳出對話框，確認是否關閉程式
以下是參考資料：
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() 跳出一個對話框，詢問使用者是否確定要退出～
如果不是 options.html 或 popup.html 的話，
那可能是已經在外部網頁，這時不做任何處理的話，
就會走 Cordova 預設的 Back 按鈕動作，也就是回到網頁的上一頁～
經過上述的修改後，Back 按鈕算是回復我原本 app 的設計囉～