? ? Hello,各位簡書的朋友大家好芋哭,這是我的第一個作品沉衣。很高興可以在這里發(fā)布作品。我將把我在工作中g(shù)et到的知識楷掉,分享到這里厢蒜。希望能夠幫助到大家。
? ? 今天分享的知識是HTML頁面中可以實現(xiàn)全屏的一個api烹植。
????????效果如下:
? ? ? ? 話不多說斑鸦,直接貼代碼。
????????????首先我們需要一個按鈕(icon圖標之類的草雕,總之可以綁定點擊事件的東西)巷屿。
? ? ? ? ? ? ? ? <button?@click="handleFullScreen">點擊切換全屏</button>
? ? ? ? ? ? 接下來就是他的回調(diào)函數(shù)
? ? methods:{
? ? ? ? //?全屏事件
????????handleFullScreen()?{
????????????let?element?=?document.documentElement;
????????????if?(this.fullscreen)?{
????????????????if?(document.exitFullscreen)?{
????????????????????document.exitFullscreen();
????????????????}?else?if?(document.webkitCancelFullScreen)?{
????????????????????document.webkitCancelFullScreen();
????????????????}?else?if?(document.mozCancelFullScreen)?{
????????????????????document.mozCancelFullScreen();
????????????????}?else?if?(document.msExitFullscreen)?{
????????????????????document.msExitFullscreen();
????????????????}
????????????}?else?{
????????????????if?(element.requestFullscreen)?{
????????????????????element.requestFullscreen();
????????????????}?else?if?(element.webkitRequestFullScreen)?{
????????????????????element.webkitRequestFullScreen();
????????????????}?else?if?(element.mozRequestFullScreen)?{
????????????????????element.mozRequestFullScreen();
????????????????}?else?if?(element.msRequestFullscreen)?{
????????????????????//?IE11
????????????????????element.msRequestFullscreen();
????????????????}
????????????}
????????}
??}
代碼格式有點亂,實在是在頁面上不好調(diào)墩虹,下次注意嘱巾。如哪里有不合理的地方憨琳,請在下方評論出來,作者看到一定回復(fù)旬昭。