安卓webview中html.requestFullscreen无效的解决方法

最新推荐文章于 2024-08-07 16:40:50 发布

姓王住在隔壁

最新推荐文章于 2024-08-07 16:40:50 发布

阅读量2.5k

点赞数 1

分类专栏： html 安卓 android 文章标签： webview 安卓 android

本文链接：https://blog.csdn.net/A498930275/article/details/116047578

版权

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

安卓

1 篇文章 0 订阅

订阅专栏

android

1 篇文章 0 订阅

订阅专栏

安卓的webview默认不支持html元素的全屏显示。

资料

安卓文档 WebChromeClient.onShowCustomView

文档显示要全屏，必须实现 **WebChromeClient.onShowCustomView()和WebChromeClient.onHideCustomView()**方法

Notify the host application that the current page has entered full screen mode. After this call, web content will no longer be rendered in the WebView, but will instead be rendered in view. The host application should add this View to a Window which is configured with WindowManager.LayoutParams.FLAG_FULLSCREEN flag in order to actually display this web content full screen.
The application may explicitly exit fullscreen mode by invoking callback (ex. when the user presses the back button). However, this is generally not necessary as the web page will often show its own UI to close out of fullscreen. Regardless of how the WebView exits fullscreen mode, WebView will invoke onHideCustomView(), signaling for the application to remove the custom View.
If this method is not overridden, WebView will report to the web page it does not support fullscreen mode and will not honor the web page’s request to run in fullscreen mode.
Note: if overriding this method, the application must also override onHideCustomView().

具体实现方法

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="font-size: 32px">点击【全屏按钮】使其进入/退出全屏</div>
    <button onclick="fullScreen(event)" style="background: green; width: 300px; height: 60px; font-size: 32px">全屏按钮</button>
</body>
<script>
    function toggleFullScreen(element) {
        let doc = window.document;
        let docEl = doc.documentElement;

        let requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
        let cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

        if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
            requestFullScreen.call(element);
        }
        else {
            cancelFullScreen.call(doc);
        }
    }
    function fullScreen(event) {
        toggleFullScreen(event.target)
    }
</script>
</html>

安卓Activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fullscreenFrame"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="10dp" android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent">
    </FrameLayout>
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mWebView"
        android:hardwareAccelerated ="true"
        android:configChanges="orientation|screenSize|keyboardHidden">
    </WebView>

</androidx.constraintlayout.widget.ConstraintLayout>

Activity.java

import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;

public class MainActivity extends AppCompatActivity {
    WebView webView;
    FrameLayout videoFrame;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.DECOR_CAPTION_SHADE_AUTO);
        setContentView(R.layout.activity_main);

        // 实例初始化
        webView = findViewById(R.id.mWebView);
        videoFrame = this.findViewById(R.id.fullscreenFrame);

        // 开启javascript 渲染
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // 设置webView的缩放比例
        webView.setInitialScale(200);

        webView.setWebViewClient(new WebViewClient());
        // 这里划重点，必须实现onShowCustomView和onHideCustomView方法，才能全屏
        webView.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onShowCustomView(View view, CustomViewCallback callback) {
                super.onShowCustomView(view, callback);
                videoFrame.removeAllViews();
                videoFrame.setVisibility(View.VISIBLE);
                videoFrame.addView(view);
            }

            @Override
            public void onHideCustomView() {
                super.onHideCustomView();
                videoFrame.setVisibility(View.GONE);
                videoFrame.removeAllViews();
            }
        });

        webView.loadUrl("http://localhost");
    }
}