日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

web 使网站在浏览器中全屏显示 fullscreen=yes

發布時間:2023/12/16 HTML 44 豆豆
生活随笔 收集整理的這篇文章主要介紹了 web 使网站在浏览器中全屏显示 fullscreen=yes 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

關于全屏(FullScreen)

  很久以前,瀏覽器就已經有全屏的概念的了。IE的open方法中可以配置上FullScreen參數來讓打開的頁面全屏化。但是這不太好用,所以沒成為主流。而且,全屏這東西如果被惡意使用會給用戶造成困擾,所以在現代瀏覽的全屏API中需要在用戶事件中調用。


  open方法的第三個參數是可以對打開的窗口做一些配置,但是現代瀏覽器并沒有吸收太多的這個部分,包括FullScreen這個配置。所以open的FullScreen依然只能在IE中使用。高版本IE中這個FullScreen也已經被弱化了,所以的全屏也只是最大化窗口而已。

open("index.html",null,"fullscreen=yes");  


注意它的值是yes或大于0的數字時才有效。傳統的IE方法并沒有對自身頁面全屏化的接口(ActiveXObject除外),而HTML5的FullScreen API是針對viewport的,所以它可以對當前文檔做全屏化。但是由于安全性的考慮(防止被惡意使用),這個API的調用需要在用戶事件中。只有用戶自己的操作才能觸發,程序無權主動調用。


var de=document.documentElement;//調整兼容性de.requestFullScreen=de.requestFullScreen||de.webkitRequestFullScreen||de.mozRequestFullScreen;//計時器調用(無效)setTimeout(function(){de.requestFullScreen();},1);//點擊事件調用(有效)de.οnclick=function(){de.requestFullScreen();};
  

目前這些全屏API還是有前綴的,所以使用起來有點麻煩,將來規范化后去掉前綴使用就會方便一些。對于一些非用戶事件,比如onload、timeout,等之類的事件中調用requestFullScreen是無法生效的。出于安全性考慮必須在用戶事件中調用,比如鼠標、鍵盤,操作。在進入全屏后,不同的瀏覽器會做出不同的提示:

Firefox:

Chrome:

  雖然全屏是針對viewport的,但是對文檔全屏的方法本身是在body或documentElement上的,具體原因我也沒去詳細了解。其它viewport比如CANVAS、VIDEO,之類的也可以發起全屏請求。


  當然,全屏API當然不只是調用全屏這個一個方法,還有取消和判斷之類的。不過由于目前規范尚未落實,所以其它方法可能還有一些其它的兼容性問題。我這里就不深入了,懂得用就行。其它具體描述可以看MDN。


    參考: MDN - Using full screen mode

總結

以上是生活随笔為你收集整理的web 使网站在浏览器中全屏显示 fullscreen=yes的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。