角7-如何工作的HTML5全屏API？我有很多错误
我使用角7，我想有一个按钮，把我的应用程序在全屏。我使用了HTML5全屏API，并编写了两个函数：
openfullscreen() {
// Trigger fullscreen
console.log('gg');
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
document.documentElement.msRequestFullscreen();
}
this.isfullscreen = true;
}
closefullscreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
this.isfullscreen = false;
}
它在一开始就起作用了，但我犯了很多错误：
错误TS2339:在'HTMLElement‘类型上不存在属性'mozRequestFullScreen’。 错误TS2339:在'HTMLElement‘类型上不存在属性'mozRequestFullScreen’。 错误TS2339:在'HTMLElement‘类型上不存在属性'webkitRequestFullscreen’。 错误TS2339:在'HTMLElement‘类型上不存在属性'webkitRequestFullscreen’。 错误TS2551:在'HTMLElement‘类型上不存在属性'msRequestFullscreen’。你是说“请求全屏”吗？ 错误TS2551:在'HTMLElement‘类型上不存在属性'msRequestFullscreen’。你是说“请求全屏”吗？ 错误TS2339:类型'mozCancelFullScreen‘上不存在属性’mozCancelFullScreen‘。 错误TS2339:类型'mozCancelFullScreen‘上不存在属性’mozCancelFullScreen‘。 错误TS2339:类型'webkitExitFullscreen‘上不存在属性’webkitExitFullscreen‘。 错误TS2339:类型'webkitExitFullscreen‘上不存在属性’webkitExitFullscreen‘。 错误TS2551:类型'msExitFullscreen‘上不存在属性’msExitFullscreen‘。你是说“退出全屏”吗？ 错误TS2551:类型'msExitFullscreen‘上不存在属性’msExitFullscreen‘。你是说“退出全屏”吗？
当我重新启动代码时，我有相同的错误，但除此之外，我还有：
Failed to compile.我的应用程序也不起作用。我怎样才能不出错地编译？
回答 2
Stack Overflow用户
发布于 2019-01-17 19:35:14
您可以通过使用as关键字来转换document和document.documentElement的接口来告诉类型记录有关将要使用的方法。
如下所示：
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
mozRequestFullScreen(): Promise<void>;
webkitRequestFullscreen(): Promise<void>;
msRequestFullscreen(): Promise<void>;
};
const docWithBrowsersExitFunctions = document as Document & {
mozCancelFullScreen(): Promise<void>;
webkitExitFullscreen(): Promise<void>;
msExitFullscreen(): Promise<void>;
};请注意，这只是防止编译错误，您仍然应该检查这些方法是否像您所做的那样存在。
所以你的方法是这样的：
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;
}Stack Overflow用户
发布于 2022-05-10 16:47:49
定义类型：
type ExitFullscreen = typeof document.exitFullscreen
type RequestFullscreen = typeof document.documentElement.requestFullscreen
declare global {
interface Document {
webkitExitFullscreen: ExitFullscreen;
mozCancelFullScreen: ExitFullscreen;
msExitFullscreen: ExitFullscreen;
}
interface HTMLElement {
webkitRequestFullscreen: RequestFullscreen;
mozRequestFullScreen: RequestFullscreen;
msRequestFullscreen: RequestFullscreen;
}
}https://stackoverflow.com/questions/54242775
复制相似问题
腾讯云开发者
