Android语言基础教程（254）Android使用WebView显示网页之让WebView支持JavaScript：解锁Android WebView的隐藏技能！教你如何让网页在App里“活”起来

一、引言：为什么你的WebView总像“僵尸网页”？

在开发Android应用时，我们经常需要内嵌网页来展示动态内容，比如用户协议、新闻详情或活动页面。WebView作为Android系统提供的“迷你浏览器”，本应轻松胜任这份工作。但很多开发者都遇到过这样的尴尬：网页是显示出来了，可按钮点不动、表单没法提交、动画效果全无——整个页面就像被“冻住”了一样！

这通常是因为一个关键功能被忽略了：JavaScript支持。

想象一下，你请了一位翻译（WebView），却没收了他的词典（JavaScript引擎），他当然只能机械地复述文字，而无法传达语言中的精妙之处。同样，没有启用JavaScript的WebView，只能静态显示网页骨架，完全无法执行页面中的交互逻辑。

别担心，今天我们就来彻底解决这个问题！通过本教程，你将学会如何“激活”WebView的JavaScript能力，让它从“静态展示框”升级为“全功能浏览器”。文末还提供了一个完整的实战示例，可以直接复制使用哦！

二、WebView与JavaScript：不得不说的“爱恨情仇”

1. 什么是WebView？它真的只是个“网页容器”吗？

WebView是Android系统提供的一个视图组件（View），允许应用在内部显示网页内容，而无需跳转到外部浏览器。从技术角度讲，它基于开源项目Chromium，但为了平衡性能和功耗，默认配置相对保守。

这就引出了一个关键点：WebView默认是禁用JavaScript的！这个设计主要是出于安全考虑，防止潜在恶意脚本在应用内执行。但这也意味着，如果我们不做任何配置，WebView加载的网页中所有JavaScript代码都会被无视。

2. JavaScript在网页中的重要性：不只是“点缀”

JavaScript对于现代网页来说，绝不是可有可无的装饰品。它负责了网页中几乎所有的交互逻辑：

如果一个网页失去了JavaScript支持，就像汽车失去了发动机——看起来还在，但已经跑不起来了。

3. 为什么Android默认禁用JavaScript？安全第一！

你可能好奇：既然JavaScript这么重要，为什么Android要默认禁用它呢？这其实是一种安全防护策略。JavaScript如果被恶意利用，可能带来以下风险：

不过，只要我们采取适当的安全措施，就能在享受JavaScript便利的同时，将风险降到最低。

三、手把手教学：让WebView支持JavaScript的四步曲

好了，理论说再多不如实际操练。下面我就带你一步步配置WebView，让它全面支持JavaScript。

步骤1：基础配置——打开JavaScript的“开关”

这是最基础也是最重要的一步。通过WebSettings对象，我们可以轻松开启JavaScript支持：

WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); // 关键代码：启用JavaScript

就这么简单？是的，核心配置只有这一行代码！但先别急着庆祝，这只是开始。

步骤2：权限申请——给WebView“发放通行证”

有些网页功能需要额外的设备权限，比如定位、摄像头等。我们需要在AndroidManifest.xml中声明相应的权限：

<uses-permission android:name="android.permission.INTERNET" />
<!-- 如果需要访问本地文件 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

注意：从Android 9.0（API级别28）开始，默认禁止明文流量。如果您的网页使用HTTP协议，还需要进行额外配置：

<application
    android:usesCleartextTraffic="true"
    ... >
</application>

步骤3：处理JavaScript对话框——别让弹窗“石沉大海”

当JavaScript需要显示警告框、确认框或提示框时，我们需要设置WebChromeClient来处理这些对话框，否则用户根本看不到它们：

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        // 处理JavaScript的alert对话框
        new AlertDialog.Builder(view.getContext())
            .setTitle("提示")
            .setMessage(message)
            .setPositiveButton("确定", null)
            .setCancelable(false)
            .create()
            .show();
        result.confirm();
        return true;
    }
    
    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        // 处理JavaScript的confirm对话框
        // 实现类似上述的逻辑
        return true;
    }
});

步骤4：安全加固——给WebView穿上“防弹衣”

启用JavaScript后，安全配置尤为重要。以下是一些基本的安全措施：

// 限制可访问的URL范围（可选）
webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 只允许加载特定域名的网页
        if (url.contains("mysafedomain.com")) {
            view.loadUrl(url);
        }
        return true;
    }
});
 
// 建议禁用文件访问
webSettings.setAllowFileAccess(false);
webSettings.setAllowContentAccess(false);

四、完整示例：打造一个支持JavaScript的全功能WebView

理论说够了，来看一个完整的实战示例。这个例子包含了上述所有最佳实践，你可以直接复制到项目中使用。

1. 布局文件（activity_main.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</LinearLayout>

2. Activity代码（MainActivity.java）

public class MainActivity extends AppCompatActivity {
 
    private WebView webView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        setupWebView();
        loadWebPage();
    }
 
    private void setupWebView() {
        webView = findViewById(R.id.webview);
        
        // 获取WebSettings并启用JavaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        
        // 其他优化设置
        webSettings.setDomStorageEnabled(true); // 启用DOM存储
        webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕大小
        webSettings.setUseWideViewPort(true); // 使用宽视图端口
        
        // 设置WebChromeClient处理JavaScript对话框
        webView.setWebChromeClient(new MyWebChromeClient());
        
        // 设置WebViewClient控制页面加载
        webView.setWebViewClient(new MyWebViewClient());
        
        // 安全配置
        webSettings.setAllowFileAccess(false);
        webSettings.setAllowContentAccess(false);
    }
 
    private void loadWebPage() {
        // 加载一个测试网页（这里使用一个简单的示例页面）
        String htmlContent = "<html><body>" +
                "<h1>JavaScript测试页面</h1>" +
                "<button onclick="showAlert()">点击我测试Alert</button>" +
                "<button onclick="showConfirm()">点击我测试Confirm</button>" +
                "<script>" +
                "function showAlert() { alert('Hello from JavaScript!'); }" +
                "function showConfirm() { " +
                "  if(confirm('确定要执行这个操作吗？')) { " +
                "    alert('你选择了确定'); " +
                "  } else { " +
                "    alert('你选择了取消'); " +
                "  }" +
                "}" +
                "</script>" +
                "</body></html>";
        
        webView.loadData(htmlContent, "text/html", "UTF-8");
        
        // 或者加载一个外部网页
        // webView.loadUrl("https://example.com");
    }
 
    // 自定义WebChromeClient处理JavaScript对话框
    private class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            showDialog("提示", message, result);
            return true;
        }
 
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            showConfirmDialog("确认", message, result);
            return true;
        }
        
        private void showDialog(String title, String message, final JsResult result) {
            new AlertDialog.Builder(MainActivity.this)
                    .setTitle(title)
                    .setMessage(message)
                    .setPositiveButton("确定", (dialog, which) -> result.confirm())
                    .setCancelable(false)
                    .create()
                    .show();
        }
        
        private void showConfirmDialog(String title, String message, final JsResult result) {
            new AlertDialog.Builder(MainActivity.this)
                    .setTitle(title)
                    .setMessage(message)
                    .setPositiveButton("确定", (dialog, which) -> result.confirm())
                    .setNegativeButton("取消", (dialog, which) -> result.cancel())
                    .setCancelable(false)
                    .create()
                    .show();
        }
    }
 
    // 自定义WebViewClient
    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebRequest request) {
            // 在这里可以控制哪些URL允许加载
            return super.shouldOverrideUrlLoading(view, request);
        }
        
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            // 页面开始加载
            super.onPageStarted(view, url, favicon);
        }
        
        @Override
        public void onPageFinished(WebView view, String url) {
            // 页面加载完成
            super.onPageFinished(view, url);
        }
    }
 
    // 处理返回键，让WebView可以返回上一页而不是直接退出Activity
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

3. AndroidManifest.xml配置

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webviewdemo">
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true"> <!-- 允许HTTP流量 -->
 
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

五、进阶技巧：让WebView体验更丝滑

配置好基础功能后，我们还可以进一步优化用户体验：

1. 添加加载进度指示

用户需要知道页面正在加载，而不是卡住了：

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        // 更新进度条
        if (newProgress < 100) {
            progressBar.setVisibility(View.VISIBLE);
            progressBar.setProgress(newProgress);
        } else {
            progressBar.setVisibility(View.GONE);
        }
    }
});

2. 处理页面错误

网络不可用或页面加载失败时，给用户友好的提示：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        super.onReceivedError(view, errorCode, description, failingUrl);
        
        // 显示错误页面
        String errorHtml = "<html><body><h2>页面加载失败</h2><p>" + description + "</p></body></html>";
        webView.loadData(errorHtml, "text/html", "UTF-8");
    }
});

3. JavaScript与Android原生代码交互

这是高级用法，允许网页中的JavaScript调用Android原生方法：

// 在Android端定义可被JavaScript调用的方法
public class WebAppInterface {
    Context context;
    
    public WebAppInterface(Context context) {
        this.context = context;
    }
    
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}
 
// 将接口添加到WebView
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
 
// 在JavaScript中可以直接调用：
// Android.showToast("Hello from Web!");

六、避坑指南：WebView开发中的常见问题

在实际开发中，你可能会遇到以下问题：

1. 网页显示不正常或功能异常

可能原因：除了JavaScript，还有其他必要设置未启用。
解决方案：

webSettings.setDomStorageEnabled(true); // 启用HTML5本地存储
webSettings.setDatabaseEnabled(true); // 启用数据库
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); // 设置缓存模式

2. 混合内容（HTTP/HTTPS）加载失败

问题描述：HTTPS页面中的HTTP资源被阻止加载。
解决方案：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

3. 内存泄漏问题

WebView容易引起内存泄漏，需要在Activity销毁时正确释放：

@Override
protected void onDestroy() {
    if (webView != null) {
        webView.stopLoading();
        webView.setWebChromeClient(null);
        webView.setWebViewClient(null);
        webView.destroy();
        webView = null;
    }
    super.onDestroy();
}

七、总结

通过本教程，你应该已经完全掌握了如何让Android WebView支持JavaScript。从基础配置到高级优化，从安全加固到错误处理，我们覆盖了WebView开发的各个方面。

记住几个关键点：

现在，你的WebView已经不再是那个“哑巴”网页容器了！它可以完美执行JavaScript代码，处理用户交互，提供接近原生应用的体验。

赶紧去试试吧！如果在实践中遇到问题，欢迎在评论区留言讨论。Happy coding！

附录：更多资源