uniapp webview页面引入的第三方小游戏，然后用户操作游戏的时候游戏会全屏

分类：uni-app

uniapp

uniapp webview页面引入的第三方小游戏，然后用户操作游戏的时候游戏会全屏，游戏全屏后webview页面的导航栏都被遮盖了，求助怎么禁止webview内的全屏，或者怎么监听全屏后退出全屏？求助各位大神

2024-02-25 15:59 负责人:无分享

4 个回复

喜欢技术的前端 - QQ---445849201

这是那个端使用的

征途决不言败 (作者)

h5 app(安卓都会有这么个问题)
就是uniapp webview 引入了一个第三方小游戏的页面，然后用户操作小游戏的时候游戏会全屏，全屏后连我 webview页面的导航条都遮盖了，用户就不好后退等操作了，我想的是如何不让小游戏全屏，或者导航条不被遮盖也行

喜欢技术的前端

APP端思路就是给三方小游戏页面注入uni-webview-js ，以及自定义的js，自定义的js 可以通过监听屏幕的变化

window.addEventListener('resize', () => {  

    const w = document.documentElement.clientWidth;  

    const h = document.documentElement.clientHeight;  

    console.log('变化', `宽度：${w}`, `高度：${h}`);  

    console.log(uni)  

    uni.postMessage({  

        data: {  

            action: 'message'  

        }  

    });  

});

在vue页面@message="getMessage" 接收

注入的方式

onReady() {  

            // #ifdef APP-PLUS  

            var currentWebview = this.$scope.$getAppWebview();  

            setTimeout(() => {  

                // 官网说每个页面都是一个webview，所以页面内的webview是它的子孩子  

                let wv = currentWebview.children()[0]  

                // // 加载完成状态   

                wv.addEventListener('loaded', () => {  

                    console.log('loaded')  

                    // 注入JS，此处是根目录下的/hybrid/html/main.js  

                    wv.setJsFile('/hybrid/html/main.js')  

                }, false);  

            }, 200)  

            // #endif  

        }

H5端可以直接在vue页面监听

// #ifdef H5  

            window.addEventListener('resize', () => {  

                const w = document.documentElement.clientWidth;  

                const h = document.documentElement.clientHeight;  

                console.log('页面大小发生了变化', `宽度：${w}`, `高度：${h}`);  

            });  

            // #endif

2024-02-25 19:44

征途决不言败 (作者)

回复喜欢技术的前端: 谢谢您的回答，目前我这边的需求发生了一些变化，在此追问一下，我的一个项目，webview引入了一些第三方的小游戏，这些小游戏可以全屏，我需要一个按钮能悬浮在全屏的小游戏上面，cover-view等都无法遮盖全屏的游戏，请教一下，uniapp是否有方法解决这个问题，按钮悬浮在webview引入的第三方小游戏全屏状态下的上层，谢谢~！

2024-02-25 20:50
2***@qq.com

回复征途决不言败: 你这个问题解决了吗？我目前也碰到这个问题，全屏以后，原生按钮消失了

2024-04-25 18:46
t***@163.com

回复 2***@qq.com: 兄弟有没有解决方案？我也遇到这个问题，不知所措

2024-09-14 11:07

1***@qq.com

App端往webview注入禁用全屏方法的JS代码就好了

// #ifdef APP-PLUS  
            // 创建 webview  
            wv = plus.webview.create(null, 'pageWebview', {  
                plusrequire:"none"  
            });  
            wv.onloaded = () => {  
                // 禁用全屏方法  
                wv.evalJS( "Element.prototype.requestFullscreen = () => {}" )  
            };  
            wv.loadURL( this.url );  
            //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效  
            var currentWebview = this.$scope.$getAppWebview();  
            //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭  
            currentWebview.append(wv);  
// #endif

1***@qq.com

<template>  
<!-- #ifndef APP-PLUS -->  
    <web-view v-if="url" :src="url"></web-view>  
<!-- #endif -->  
</template>  

<script>  
    var wv;  

    export default {  
        onLoad(e) {  
            this.url = e.url;  

// #ifdef APP-PLUS  
            // 创建 webview  
            wv = plus.webview.create(null, 'pageWebview', {  
                plusrequire:"none"  
            });  
            wv.onloaded = () => {  
                // 禁用全屏方法  
                wv.evalJS( "Element.prototype.requestFullscreen = () => {}" )  
            };  
            wv.loadURL( this.url );  
            //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效  
            var currentWebview = this.$scope.$getAppWebview();  
            //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭  
            currentWebview.append(wv);  
// #endif  
        },  
        data() {  
            return {  
                url: ""  
            }  
        }  
    }  
</script>  

<style>  

</style>

要回复问题请先登录或注册

uniapp webview页面引入的第三方小游戏，然后用户操作游戏的时候游戏会全屏

4 个回复

公告

相关问题

uniapp webview页面引入的第三方小游戏，然后用户操作游戏的时候游戏会全屏

与内容相关的链接

4 个回复

公告

相关问题