源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

用html5 js实现点击一个按钮达到浏览器全屏效果

  • 时间:2022-08-31 19:30 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:用html5 js实现点击一个按钮达到浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 [b]全屏 [/b]
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();

}
[b]退出全屏  [/b]
 if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
} 
[b]事件监听[/b]
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); 
[b]全屏样式设置 [/b] 在浏览器全屏的使用我们还可以进行样式设置
html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
} 
[b]附录[/b] 1 一个在线的Demo     [url=http://robnyman.github.io/fullscreen/]http://robnyman.github.io/fullscreen/[/url] 2   HTML5全屏API之网络钓鱼       [url=http://www.36ria.com/5807]http://www.36ria.com/5807[/url] 3   jquery封装的全屏插件      [url=http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/]http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/[/url] 4  更加详细的全屏API介绍     4.1 [url=https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode]https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode[/url]     4.2  [url=https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html]https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html[/url] 5  HTML5全屏API在FireFox/Chrome中的显示差异    [url=http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/]http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部