如何在Android WebView中启用Element.requestFullscreen功能？

在iOS中，只需开启WKWebView的isElementFullscreenEnabled配置，就能让页面通过requestFullscreen()实现元素全屏。在Android WebView中，没有直接对应的单一开关，需要通过配置WebView并实现WebChromeClient的全屏回调来完成相同功能，具体步骤如下：

1. 核心配置与代码修正 #

修正FullScreenClient实现 #

原代码存在语法错误（如方法名首字母大写、构造函数写法错误），以下是修正后的版本：

class FullScreenClient(
    private val parent: ViewGroup,
    private val content: ViewGroup
) : WebChromeClient() {
    private val matchParentLayout = FrameLayout.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT
    )
    private lateinit var customView: View
    private lateinit var customViewCallback: CustomViewCallback

    override fun onShowCustomView(view: View, callback: CustomViewCallback) {
        customView = view
        customViewCallback = callback
        // 将全屏视图添加到父容器
        view.layoutParams = matchParentLayout
        parent.addView(view)
        // 隐藏原WebView所在的内容容器
        content.visibility = View.GONE
    }

    override fun onHideCustomView() {
        // 恢复原内容容器显示
        content.visibility = View.VISIBLE
        // 移除全屏视图
        parent.removeView(customView)
        customViewCallback.onCustomViewHidden()
    }
}

正确初始化WebView（Compose环境下） #

需要给FullScreenClient传入正确的父容器（用于承载全屏视图）和内容容器（原WebView所在的容器），示例代码：

// 先用FrameLayout包裹WebView，作为content容器
AndroidView(factory = { context ->
    val parentLayout = FrameLayout(context).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
    }
    val webView = WebView(context).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        webViewClient = WebViewClient()
        // 传入父容器和内容容器（这里parentLayout既是父容器也是content容器）
        webChromeClient = FullScreenClient(parentLayout, parentLayout)

        settings.apply {
            javaScriptEnabled = true // 必须开启JS
            domStorageEnabled = true
            databaseEnabled = true
            // 可选：允许内联媒体播放，和iOS的allowsInlineMediaPlayback对应
            mediaPlaybackRequiresUserGesture = false
        }

        loadUrl(mUrl)
    }
    parentLayout.addView(webView)
    parentLayout
}, update = { webViewContainer ->
    (webViewContainer.getChildAt(0) as WebView).loadUrl(mUrl)
})

2. 关键说明 #

• Android WebView没有直接对应iOS isElementFullscreenEnabled的单一开关，只要开启JavaScript并正确实现WebChromeClient的onShowCustomView/onHideCustomView，就能支持页面的requestFullscreen()调用。
• 必须确保FullScreenClient能访问到正确的父容器，否则无法将全屏视图添加到界面中。
• 调用customViewCallback.onCustomViewHidden()是必要的，通知WebView全屏状态已结束。

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