【报Bug】openWindow和强制横屏竖屏之间的问题

分类：HBuilderX

最新的hbuilderX 5+App mui项目安卓

点击按钮使用openWindow打开新页面后，

在新页面中有另一个按钮点击后强制横屏plus.screen.lockOrientation("landscape-primary");

还有一个按钮点击后恢复竖屏plus.screen.lockOrientation("portrait-primary");

（之所以有横屏和竖屏主要是为了让用户横屏查看图表的功能。）

之后点返回回到上一页。

然后再点击这个按钮openWindow打开新页面这个页面的宽变成了高，高变成了宽。由于高变成了宽，内容只占了手机上半屏，下半屏是openWindow之前那个页面的内容。宽变成了高，导致横向变得很宽，超出了手机屏幕。

就是说openWindow和强制横屏竖屏之间存在问题。

2019-08-21 18:04 负责人:无分享

5 个回复

云端的风 (作者)

重新建了个项目并没有发现这个问题，但是一旦加上这段代码
window.addEventListener("orientationchange", function (){
if (window.orientation==90){
plus.navigator.setFullscreen(true);
}else{
plus.navigator.setFullscreen(false);
}
});

就会出现我说的这个问题。

这段代码是想监听横屏和竖屏如果横屏就把上方的状态栏给隐藏掉，竖屏就显示出来加上这段代码就会出BUG

云端的风 (作者)

<!doctype html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.css" rel="stylesheet" />  
    </head>  

    <body>  
        <script src="js/mui.js"></script>  
        <script src="js/jquery-3.3.1.min.js"></script>  
        <script type="text/javascript">  
            mui.init()  
        </script>  
        <button id="back">返回</button>  
        <button id="b1">全屏</button>  
        <button id="b2">取消</button>  
        <ul>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
            <li>我是new_file.html</li>  
        </ul>  
    </body>  
    <script>  
        $(function(){  
            mui.plusReady(function () {  
                $("#back").on("tap",function(){  
                    mui.back();  
                })  
                $("#b1").on("tap",function(){  
                    plus.screen.lockOrientation("landscape-primary");  
                })  
                $("#b2").on("tap",function(){  
                    plus.screen.lockOrientation("portrait-primary");  
                })  
                window.addEventListener("orientationchange", function (){  
                    if (window.orientation==90){  
                        plus.navigator.setFullscreen(true);  
                    }else{  
                        plus.navigator.setFullscreen(false);  
                    }  
                });  
            })  
        })  
    </script>  
</html>

云端的风 (作者)

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <script src="js/jquery-3.3.1.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</head>  
<body>  
    <button id="b1">打开新页面</button>  
    <ul>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
        <li>我是index.html</li>  
    </ul>  
    <script>  
        $(function(){  
            $("#b1").on("tap",function(){  
                var href = "new_file.html";  
                var id = "new_file.html";  
                mui.openWindow(href,id);  
            })  
        })  
    </script>  
</body>  
</html>

云端的风 (作者)

我注释了window.addEventListener("orientationchange", function (){
if (window.orientation==90){
plus.navigator.setFullscreen(true);
}else{
plus.navigator.setFullscreen(false);
}
}); 这段代码

然后在切换全屏后增加plus.navigator.setFullscreen(true); 取消全屏后增加plus.navigator.setFullscreen(false);

也就是改成了$("#b1").on("tap",function(){
plus.screen.lockOrientation("landscape-primary");
plus.navigator.setFullscreen(true);
})
$("#b2").on("tap",function(){
plus.screen.lockOrientation("portrait-primary");
plus.navigator.setFullscreen(false);
})
之后，再取消全屏和全屏时也会出现异常，就是在没全屏或没取消全屏之前先执行了状态栏的改变。也导致了页面显示不全

最后改成了
$("#b1").on("tap",function(){
plus.screen.lockOrientation("landscape-primary");
setTimeout(function(){plus.navigator.setFullscreen(true)},500);
})
$("#b2").on("tap",function(){
plus.screen.lockOrientation("portrait-primary");
setTimeout(function(){plus.navigator.setFullscreen(false)},500);
})

让状态栏的改变延迟500毫秒执行，目前暂时解决了这个问题。希望可以得到修复，也许是我哪里写的不对，请大佬讲解，谢谢。

云端的风 (作者)

这个问题确实只在openWindow时才会出现，如果是location.href直接跳转的话，不存在这个问题，监听修改状态栏也可以用

该问题目前已经被锁定, 无法添加新回复

【报Bug】openWindow和强制横屏竖屏之间的问题

5 个回复

公告

相关问题

【报Bug】openWindow和强制横屏竖屏之间的问题

与内容相关的链接

5 个回复

公告

相关问题