WebView中点击CheckBox或图片跳转新Android Activity方案问询

我来帮你搞定这个需求！要实现WebView里的CheckBox或者图片点击后跳转到新Activity加载第二个页面，咱们分几步来：

1. 给WebView开启JavaScript交互并绑定Android接口 #

首先在你的主Activity（比如MainActivity）里，得给WebView开启JS支持，还要绑定一个供HTML调用的接口，这样HTML里的点击事件才能通知Android端启动新页面。

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        // 必须启用JavaScript，否则HTML里的点击事件没法调用Android接口
        webSettings.setJavaScriptEnabled(true);
        // 绑定接口，"AndroidInterface"是HTML里要调用的对象名称，别写错哦
        webView.addJavascriptInterface(new AndroidInterface(), "AndroidInterface");

        // 加载本地的screen1.html，假设你把它放在assets目录下
        webView.loadUrl("file:///android_asset/screen1.html");
    }

    // 定义供HTML调用的内部类接口
    public class AndroidInterface {
        @JavascriptInterface // 这个注解一定要加！Android 4.2+必须用它来暴露方法
        public void jumpToScreen2() {
            // 启动Screen2Activity的逻辑
            Intent intent = new Intent(MainActivity.this, Screen2Activity.class);
            startActivity(intent);
        }
    }
}

2. 修改screen1.html，给控件添加点击事件 #

接下来要给你的HTML里的CheckBox和图片加上点击事件，调用刚才绑定的Android接口方法：

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style>
        body { background-color: black; color: white; text-align:center; }
    </style>
    <script>
        // 封装跳转方法，调用Android端的接口
        function goToScreen2() {
            AndroidInterface.jumpToScreen2();
        }
    </script>
</head>
<body>
    <!-- 给CheckBox绑定点击事件 -->
    <input type="checkbox" onclick="goToScreen2()" /> 勾选我跳转至Screen2
    <!-- 给图片绑定点击事件，替换成你的图片路径哦 -->
    <img src="your_image_path.png" onclick="goToScreen2()" alt="点击跳转图片" />
</body>
</html>

3. 创建Screen2Activity并加载screen2.html #

现在创建你要跳转的Screen2Activity，里面同样放一个WebView来加载screen2.html：

public class Screen2Activity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen2);

        webView = findViewById(R.id.webview_screen2);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        // 加载本地的screen2.html
        webView.loadUrl("file:///android_asset/screen2.html");
    }
}

4. 配置布局和Manifest #

别忘啦给两个Activity的布局文件添加WebView控件：

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<WebView
    android:id="@+id/webview_screen2"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

最后在AndroidManifest.xml里注册Screen2Activity：

<activity android:name=".Screen2Activity" />

注意事项 #

• 如果你加载的是网络图片，记得给App添加INTERNET权限：<uses-permission android:name="android.permission.INTERNET" />
• @JavascriptInterface注解不能少，否则Android 4.2及以上版本会禁止HTML调用Android方法，这是安全机制要求
• 本地HTML和图片要放在assets目录下，路径写file:///android_asset/xxx才对

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