Android Studio + Webview + JS 俄羅斯方塊

這幾天想到 andorid 可以內鑲網頁,於是 google 了一下 webview 怎麼實作,沒想到不到一小時照著範例就完成了😅 Google 關鍵字 Android Webview

//使用 webview
WebView webview = findViewById(R.id.webview);
WebSettings webSettings = webview.getSettings();
//允許使用 Javascript
webSettings.setJavaScriptEnabled(true);

setContentView(webview);

然後再 google 一下webview 如何控制彈出視窗,原來引用的物件不一樣就可以控制了

//沒有要處理 JS 彈出視窗
//webview.setWebViewClient(new WebViewClient());
//最基本的彈出視窗處理,引用的是 WebChromeClient , 不是 WebViewClient
//webview.setWebChromeClient(new WebChromeClient());

控制的寫法可以直接用 alt + ins 選擇 Override 再去選要加的項目,程式碼建置比較快速,然後我這邊是用 AlertDialog 改成 android 的彈出視窗,注意的是 result 一定要有回傳,不然 JS 會停在那邊

//處理彈出的視窗
webview.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        //這是預設的彈出視窗
        //return super.onJsAlert(view, url, message, result);
        //可以改成自己的視窗
        AlertDialog.Builder alertDialog_Builder = new AlertDialog.Builder(MainActivity.this);
        alertDialog_Builder.setMessage(message);
        alertDialog_Builder.setTitle("");
        //點擊螢幕外,還有返回鍵皆不可取消
        alertDialog_Builder.setCancelable(false);
        alertDialog_Builder.setNegativeButton("EXIT", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                result.cancel();
            }
        });
        alertDialog_Builder.create();
        alertDialog_Builder.show();
        //提醒視窗一樣要傳回
        result.cancel();
        return true;
    }

    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        //這是預設的彈出視窗
        //return super.onJsConfirm(view, url, message, result);
        //可以改成自己的視窗
        AlertDialog.Builder alertDialog_Builder = new AlertDialog.Builder(MainActivity.this);
        alertDialog_Builder.setMessage(message);
        alertDialog_Builder.setTitle("");
        //點擊螢幕外,還有返回鍵皆不可取消
        //這邊要注意,如果可以取消的話,因為送不出去 result 狀態, webview 將會停止
        alertDialog_Builder.setCancelable(false);
        alertDialog_Builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                result.confirm();
            }
        });
        alertDialog_Builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                result.cancel();
            }
        });

        AlertDialog dialog = alertDialog_Builder.create();
        dialog.show();
        return true;
    }
});

下面這個是實際執行的樣式,完全不用重寫就把 JS 的俄羅斯方塊搬到 android APP 了 ~因為是網頁,所以只要再調整 css 不要爆版就行了~👍