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代码
JS测试