微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

再次移动请求requestFullscreen时收到错误消息 铬

如何解决再次移动请求requestFullscreen时收到错误消息 铬

用户向下滚动时,我正在尝试全屏显示。 所以我向下滚动调用requestFullscreen(),向上滚动调用exitFullscreen()。到此阶段,它仍然可以正常工作,但是我再次向下滚动调用requestFullscreen()时,收到错误消息无法在“元素”上执行“ requestFullscreen”:API只能由用户手势启动。

@HostListener('window:touchstart',['$event'])
handletouchStart(event) {

        if (!window.document.fullscreenElement) {
            this.isFullScreen = false;
        } else {
            this.isFullScreen = true;
        }

}
@HostListener('document:touchend',['$event'])
handletouchEnd(event) {
    if (event.cancelable) {
        event.preventDefault();
    }
    if (!this.isFullScreen && (this.prevIoUsScrollTop < this.body.nativeElement.scrollTop)) {
        this.openfullscreen();

    } else if (this.isFullScreen && (this.prevIoUsScrollTop > this.body.nativeElement.scrollTop)) {
        this.closefullscreen();
    }
    this.prevIoUsScrollTop = this.body.nativeElement.scrollTop;
}

 openfullscreen() {
    // Trigger fullscreen

    const docElmWithbrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
        mozRequestFullScreen(): Promise<void>;
        webkitRequestFullscreen(): Promise<void>;
        msRequestFullscreen(): Promise<void>;
    };

    if (docElmWithbrowsersFullScreenFunctions.requestFullscreen) {
        docElmWithbrowsersFullScreenFunctions.requestFullscreen();
    } else if (docElmWithbrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
        docElmWithbrowsersFullScreenFunctions.mozRequestFullScreen();
    } else if (docElmWithbrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome,Safari and Opera */
        docElmWithbrowsersFullScreenFunctions.webkitRequestFullscreen();
    } else if (docElmWithbrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
        docElmWithbrowsersFullScreenFunctions.msRequestFullscreen();
    }
    this.isFullScreen = true;
}

closefullscreen(){
    const docWithbrowsersExitFunctions = document as Document & {
        mozCancelFullScreen(): Promise<void>;
        webkitExitFullscreen(): Promise<void>;
        msExitFullscreen(): Promise<void>;
    };


    if (docWithbrowsersExitFunctions.exitFullscreen) {
        docWithbrowsersExitFunctions.exitFullscreen();
    } else if (docWithbrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
        docWithbrowsersExitFunctions.mozCancelFullScreen();
    } else if (docWithbrowsersExitFunctions.webkitExitFullscreen) { /* Chrome,Safari and Opera */
        docWithbrowsersExitFunctions.webkitExitFullscreen();
    } else if (docWithbrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
        docWithbrowsersExitFunctions.msExitFullscreen();
    }
    this.isFullScreen = false;
}

我查看了event.isTrusted,这是真实的,这是用户输入的。 为什么即使我通过touchend事件调用requestFullscreen()也会出现错误

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。