给一个项目中的webview页面提示框优化处理:
- 之前显示的是这样:
</div>
<img src="http://upload-images.jianshu.io/upload_images/3154077-fb19cf86b9cc64a3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "200" height = "200" alt="网页效果" align=center />
</div> - 现在的效果:
</div>
<img src="http://upload-images.jianshu.io/upload_images/3154077-6a792d7ff141b9f5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "200" height = "200" alt="原生效果" align=center />
</div>
可以看到标题的样式发生了改变,其实我们可以改变对话框里所有的内容.
处理方法:
private class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsConfirm(WebView view, String url, final String message, final JsResult result) {
runOnUiThread(new Runnable() {
@Override
public void run() {
new AlertDialog.Builder(MainActivity.this)
.setTitle("温馨提示：")
.setMessage(message)
.setPositiveButton("确定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();//这里必须调用，否则页面会阻塞造成假死
// mWebView.reload();//重新刷新页面
}
})
.setNegativeButton("取消",new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
})
.setOnCancelListener(new DialogInterface.OnCancelListener() {
@Override
public void onCancel(DialogInterface dialogInterface) {
result.cancel();
}
})
.show();
}
});
return true;
}
}
关键点
- 自定义ChromClient,设置在webview中
- 之前看文章说是在onJsAlert方法中,加入自己写的AlertDialog,但是没效果,断点也进不去,后来我在onJsConfirm方法中加载了这个AlertDialog,发现效果实现了.
- 重中之重:记得在取消和确认的时候处理result,并且如果AlertDialog是点击外部取消的话,也要处理result在cancel掉的结果,否则会造成webview页面塞假死
- 可能会需要AppCompat的主题,之前我用5.1的Theme.noActionBar之类的主题,崩溃了,现在是Theme.AppCompat.Light
抓取网页代码
<a href="https://www.nhw360.com/wishlist/xxx/xxx/" onclick="return confirmRemoveWishlistItem();" title="删除项目" class="btn-remove btn-remove2">取消收藏</a>
function confirmRemoveWishlistItem() {
return confirm('您是否确认要从我的收藏中删除该产品？');
}
可以看到js代码是调用了confirm方法的,所以我们在onJsAlert方法设置无效,所以大家可以多试试,有时候也许前端写的代码是alert的,那我们在onJsConfirm中设置肯定是无效的.
