Android的內嵌網頁(WebView)如何實作Facebook分享

有在寫App的人大概都會知道，如果把網頁包在App裡面，雖然有時可以很快解決版面、內容與網站的頁面共用的好處，但如果網頁有一些使用JavaScript的行為，像是開新視窗(window.open)、警告視窗(alert)...等語法在Android的Webview就會出現一些問題了。

通常會有使用者來跟你說：為什麼同樣的網頁內容，我用手機的瀏覽器去操作，可以出現的功能在你的App裡面就沒有任何反應?(你有頭緒嗎?)

最近就遇到了網頁裡的Facebook分享按鈕在Android的Webview裡面按下後沒有產生任何反應，更可怕的是出現了在iOS裡面是可以正確執行的對照組。所以就只能自己想辦法實作了。

仔細看了一下FB分享按鈕在網頁的語法會發現是觸發了window.open的方法

<a href="javascript: void(0)" onclick="window.open('http://www.facebook.com/sharer.php?sdk=joey&u=http://www.cw.com.tw/article/article.action?id=5075515& display = popup & ref = plugin & src = share_button','_blank','width = 700, height = 650');"></a>

所以解決的方法就是去實作WebChromeClient的Callback: onCreateWindow()，攔截彈出視窗時做出相對應的處理。

    /**
     * 實作WebChromeClient內容
     */
    private WebChromeClient webChromeClient = new WebChromeClient() {
       
        @Override
        public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture,Message resultMsg) {

            //前往新網頁
            ((WebView.WebViewTransport) resultMsg.obj).setWebView(
                    new WebView(view.getContext()));
            resultMsg.sendToTarget();

            return true;
        }
    };

再將上述實作的WebChromeClient設定到WebVeiw的setWebChromeClient裡

webView.setWebChromeClient(webChromeClient);

如此當使用者在App裡按下了Facebook分享的按鈕時，也一樣會彈出了另一個新的視窗，達成分享網址的目的，而如果是G+分享也一樣能透過這個方式完成。