移动端iOS和Android中WebView拦截html的ale

iOS端

使用的控件为WKWebView，拦截事件在WKUIDelegate中进行处理。

//MARK: - 网页UI代理(WKWebView阻止了js的alert事件)
extension GDCloudViewController: WKUIDelegate {
    // 监听通过JS调用警告框
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in
            completionHandler()
        }))
        self.present(alert, animated: true, completion: nil)
    }
     
    // 监听通过JS调用提示框
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        
        alert.addAction(UIAlertAction(title: "取消", style: .default, handler: { (action) in
            completionHandler(false)
        }))
        alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in
            completionHandler(true)
        }))
        self.present(alert, animated: true, completion: nil)
    }
     
    // 监听JS调用输入框
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        let alert = UIAlertController(title: nil, message: prompt, preferredStyle: .alert)
        
        alert.addTextField { (textField) in
            textField.text = defaultText
        }
        
        alert.addAction(UIAlertAction(title: "取消", style: .default, handler: { (action) in
            completionHandler(nil)
        }))
        
        alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in
            completionHandler(alert.textFields?[0].text)
        }))
        self.present(alert, animated: true, completion: nil)
    }
}

Android端

安卓需要先开启JS支持webView.getSettings().setJavaScriptEnabled(true);
具体代理事件处理如下所示：

webView.setWebChromeClient(new WebChromeClient() {

            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
                builder.setTitle("")
                        .setMessage(message)
                        .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                result.confirm();
                            }
                        })
                        .setCancelable(false)
                        .create()
                        .show();
                return true;
            }

            @Override
            public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
                builder.setTitle("")
                        .setMessage(message)
                        .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                result.confirm();
                            }
                        })
                        .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                result.cancel();
                            }
                        })
                        .setCancelable(false)
                        .create()
                        .show();
                return true;
            }

            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {

                final EditText et = new EditText(view.getContext());
                AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
                builder.setTitle("")
                        .setMessage(message)
                        .setView(et)
                        .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                result.confirm(et.getText().toString());
                            }
                        })
                        .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                result.cancel();
                            }
                        })
                        .setCancelable(false)
                        .create()
                        .show();
                return true;
            }
        });

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>JS测试</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function toast_alert(){
            alert("弹窗");
            changeValue("");
        }

        function toast_confirm(){
            var result = confirm("确定要退出吗？");
            if (result) {
                changeValue("确定");
            } else {
                changeValue("取消");
            }
        }

        function toast_prompt(){
            var result = prompt("请输入", "");
            if (result) {
                changeValue(result);
            } else if (result === "") {
                changeValue("没有输入内容");
            } else {
                changeValue("取消");
            }
        }

        function changeValue(value) {
            document.getElementsByClassName("content")[0].innerHTML = value;
        }
    </script>
</head>
<body>
    <button onclick="toast_alert()">点击弹窗alert</button>
    <br/>
    <button onclick="toast_confirm()">点击弹窗confirm</button>
    <br/>
    <button onclick="toast_prompt()">点击弹窗prompt</button>
    <br/>
    <p class="content"></p>
</body>
</body>
</html>