Android WebView弹窗关闭按钮失效及地图不显示问题求助

数据老陈

2026-5-27

解决WebView中自定义地图弹窗无法关闭的问题

Hey，我来帮你搞定这个弹窗关不掉的麻烦！先帮你梳理下问题根源，再一步步给你解决方案：

问题根源拆解

你加载https://www.sla.gov.sg/inlis/#/时遇到的弹窗无法关闭、后台地图不显示的问题，主要是两个原因：

代码里的页面加载逻辑冲突——你在onPageFinished里重新加载了另一个URL，直接覆盖了原页面的弹窗逻辑
WebView缺少现代网页需要的JS支持配置，导致自定义弹窗的交互失效

分步解决方案

1. 先填最明显的坑：移除重复加载的URL

看你的代码，在WebViewClient的onPageFinished方法里，你额外加载了https://www.sla.gov.sg/INLIS/，这会直接把原本要加载的https://www.sla.gov.sg/inlis/#/页面给替换掉，弹窗的逻辑自然就跑不起来了。赶紧把这行代码删掉：

// 把这行代码删掉！
MainActivity.this.mWebview.loadUrl("https://www.sla.gov.sg/INLIS/");

2. 给WebView补全必要的JS配置

现代网页很多依赖DOM存储等特性，你的WebView目前只开了JavaScriptEnabled，还需要加几个关键配置：

WebSettings webSettings = mWebview.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true); // 启用DOM存储，很多弹窗逻辑依赖这个
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); // 合理设置缓存，避免页面加载异常

3. 注入JS搞定自定义弹窗关闭

这个弹窗是页面自己做的（不是系统的alert弹窗），所以得通过注入JS来让关闭按钮正常工作。首先你需要找到关闭按钮和弹窗容器的选择器（比如类名、ID）——你已经开了WebContentsDebuggingEnabled，可以用Chrome的chrome://inspect连接你的WebView，查看弹窗元素的具体选择器，然后替换下面代码里的占位符：

@Override
public void onPageFinished(WebView view, String url) {
    Log.e("url",url);
    this.pd.dismiss();
    
    // 注入JS处理弹窗关闭
    view.loadUrl("javascript:(function() { " +
        // 替换成实际的关闭按钮选择器，比如按钮类是'modal-close-btn'
        "var closeBtn = document.querySelector('.modal-close-btn'); " +
        "if(closeBtn) { " +
        "   closeBtn.onclick = function() { " +
        "       // 替换成弹窗容器的选择器，比如'modal-container'" +
        "       var modal = document.querySelector('.modal-container'); " +
        "       if(modal) { " +
        "           modal.style.display = 'none'; " +
        "           // 如果页面本身有关闭弹窗的JS方法，比如window.closeModal()，可以直接调用这个" +
        "       } " +
        "   }; " +
        "} " +
    "})()");
}

4. 完善WebChromeClient的JS交互处理

虽然你的问题是自定义弹窗，但完善系统JS弹窗的处理也能避免其他潜在问题：

mWebview.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        Log.e("urlss",url);
        return super.onJsAlert(view, url, message, result); // 不要拦截系统弹窗，除非你要自定义样式
    }
    
    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        return super.onJsConfirm(view, url, message, result);
    }
});

额外检查项

确认你的Manifest里已经加了网络权限：

<uses-permission android:name="android.permission.INTERNET" />

不要拦截弹窗相关的URL请求，确保shouldOverrideUrlLoading只处理tel等特殊协议，HTTP/HTTPS请求正常放行

内容的提问来源于stack exchange，提问作者Shadow