Android WebView通过JavaScript控制LinearLayout显示隐藏问题

我之前也碰到过类似的坑，咱们一步步拆解问题，然后给你靠谱的解决方案：

问题根源分析 #

1. 最初的findViewById报错：你的WebAppInterface类不是Activity，本身没有findViewById方法，直接调用肯定找不到这个方法。
2. 继承MainActivity后无效/崩溃：Activity实例是Android系统严格管理的，你手动创建的继承自MainActivity的WebAppInterface对象，没有经过完整的Activity生命周期，上下文是无效的，自然找不到目标布局，甚至会因为生命周期冲突导致崩溃。

正确解决方案 #

核心思路：让WebAppInterface持有Activity的上下文或者直接持有目标LinearLayout的引用，同时注意线程安全和JS调用的注解要求。

1. 编写正确的WebAppInterface类

不要继承Activity，通过构造函数传入需要的上下文和目标布局：

public class WebAppInterface {
    private Context mContext;
    private LinearLayout mTargetLayout;

    // 构造方法：传入上下文和要控制的LinearLayout
    public WebAppInterface(Context context, LinearLayout targetLayout) {
        mContext = context;
        mTargetLayout = targetLayout;
    }

    // 供JS调用的显示方法，必须加@JavascriptInterface注解
    @JavascriptInterface
    public void showLinearLayout() {
        // JS调用在非UI线程，必须切换到UI线程操作View
        ((Activity) mContext).runOnUiThread(() -> {
            mTargetLayout.setVisibility(View.VISIBLE);
        });
    }

    // 供JS调用的隐藏方法
    @JavascriptInterface
    public void hideLinearLayout() {
        ((Activity) mContext).runOnUiThread(() -> {
            mTargetLayout.setVisibility(View.GONE);
        });
    }
}

2. 在MainActivity中初始化并绑定WebView

在你的主Activity里，先拿到目标LinearLayout的实例，再把它和上下文传给WebAppInterface：

public class MainActivity extends AppCompatActivity {
    private LinearLayout myTargetLayout;
    private WebView myWebView;

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

        // 初始化目标LinearLayout（替换成你布局里的ID）
        myTargetLayout = findViewById(R.id.your_linear_layout_id);

        // 配置WebView
        myWebView = findViewById(R.id.webview);
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true); // 必须启用JS

        // 绑定JS接口，"AndroidInterface"是JS里要调用的对象名
        myWebView.addJavascriptInterface(new WebAppInterface(this, myTargetLayout), "AndroidInterface");

        // 加载你的网页（本地或远程，本地的话放在assets目录）
        myWebView.loadUrl("file:///android_asset/test_page.html");
    }
}

3. 网页中的JS调用示例

在你的HTML页面里，直接通过绑定的对象名调用方法：

<!DOCTYPE html>
<html>
<body>
    <button onclick="showLayout()">显示布局</button>
    <button onclick="hideLayout()">隐藏布局</button>

    <script>
        function showLayout() {
            AndroidInterface.showLinearLayout();
        }
        function hideLayout() {
            AndroidInterface.hideLinearLayout();
        }
    </script>
</body>
</html>

关键注意点 #

• @JavascriptInterface注解不能少：Android 4.2及以上版本，只有带这个注解的方法才能被JS调用，否则会被安全机制拦截。
• 必须在UI线程操作View：JS调用的方法运行在WebView的后台线程，直接操作View会抛出异常，一定要用runOnUiThread切换线程。
• 不要手动创建Activity实例：Activity的生命周期由系统管理，自定义类继承Activity并手动实例化，只会导致上下文无效或崩溃。

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