Issue
I use Angular 7 and I would like have a button for put my app in fullscreen. I use the HTML5 Fullscreen API and I've make 2 functions :
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;
}
It worked in the beginning but I had a lot of error :
error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
error TS2339: Property 'webkitRequestFullscreen' does not exist on type 'HTMLElement'.
error TS2339: Property 'webkitRequestFullscreen' does not exist on type 'HTMLElement'.
error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
error TS2339: Property 'webkitExitFullscreen' does not exist on type 'Document'.
error TS2339: Property 'webkitExitFullscreen' does not exist on type 'Document'.
error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
When I restart my code I've the same errors but, in addition, I've that :
Failed to compile.
And my app don't work. How I can compile without errors?
Solution
You can tell typescript about the methods that you're going to use by using the as
keyword to cast the interface of document
and document.documentElement
.
Like this:
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>;
};
Please note that this just prevents compile error and you still should check if the methods exist like you did.
So your methods will be like this:
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;
}
Answered By - Vahid
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.