再次移动请求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 (将#修改为@）