本站首頁    關于我們    服務范圍    網站建設    案例展示    空間域名    聯系我們
本工作室主要業務:網站建設-網絡推廣-虛擬主機-空間域名-論壇維護升級安裝等.. 客戶服務電話:15031560143 QQ:61391038

項目中需要將后臺瀏覽器的窗口全屏,也就是我們點擊一個按鈕要實現按F11全屏的效果。 在HTML5中,W3C制定了關于全屏的API,就可以實現全屏幕的效果,也可以讓頁面中的圖片,視頻等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

全屏

var docElm = document.documentElement;

//W3C

if (docElm.requestFullscreen) {

docElm.requestFullscreen();

}

//FireFox

else if (docElm.mozRequestFullScreen) {

docElm.mozRequestFullScreen();

}

//Chrome等

else if (docElm.webkitRequestFullScreen) {

docElm.webkitRequestFullScreen();

}

//IE11

else if (elem.msRequestFullscreen) {

elem.msRequestFullscreen();

}

退出全屏

if (document.exitFullscreen) {

document.exitFullscreen();

}

else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

}

else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

}

else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

事件監聽

document.addEventListener("fullscreenchange", function () {

fullscreenState.innerHTML = (document.fullscreen) "" : "not ";}, false);

document.addEventListener("mozfullscreenchange", function () {

fullscreenState.innerHTML = (document.mozFullScreen) "" : "not ";}, false);

document.addEventListener("webkitfullscreenchange", function () {

fullscreenState.innerHTML = (document.webkitIsFullScreen) "" : "not ";}, false);

document.addEventListener("msfullscreenchange", function () {

fullscreenState.innerHTML = (document.msFullscreenElement) "" : "not ";}, false);

全屏樣式設置

在瀏覽器全屏的使用我們還可以進行樣式設置

html:-moz-full-screen {

background: red;

}

html:-webkit-full-screen {

background: red;

}

html:fullscreen {

background: red;

}

附錄

1 一個在線的Demo

http://robnyman.github.io/fullscreen/

2 HTML5全屏API之網絡釣魚

http://www.36ria.com/5807

3 jquery封裝的全屏插件

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4 更加詳細的全屏API介紹

4.1https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

Copyright@2009 www.466528.tw. All Rights Reserved. 唐山網絡信息工作室 版權所有
服務熱線:0315--6025099 15031560143 郵箱:61391038@qq.com 地址:河北唐山遵化市
福建36选7中奖查询 今日甘肃快三开奖结果查询结果 体彩篮球胜分差怎么算 酒泉彩票大奖 快乐12多钱一注 手机棋牌付费率 四川时时彩12选5开奖结果一Welcome dg官网旗舰店 ds视讯太阳厅 湖南快乐十分选三前直 周一竞彩足球比分直播 360天津11选5走势图表 比特币价格走势历史图 四人麻将在线游戏 福州体育彩票领奖 湖北30选5开奖公告 3中3平码图