兼容IE11及各浏览器的HTML5全屏API实现方案
作者:交互手记时间:2026-10-22 15:49:38浏览:163
本文介绍如何在现代浏览器及IE11中实现全屏功能。现代浏览器及IE11可直接调用HTML5全屏API,而低版本IE需通过ActiveX插件实现。文章提供完整代码示例,并说明如何通过判断浏览器类型控制按钮显示,以适配不同环境。
现代浏览器与IE的全屏实现差异
现代浏览器(含IE11)均支持通过HTML5标准的全屏API实现全屏功能。相比之下,低版本IE浏览器无法直接使用该API,必须依赖ActiveX插件来完成全屏操作。
以下是具体的代码实现示例:
兼容各浏览器的全屏代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fullScreen()">现代浏览器全屏</button>
<button onclick="exitScreen()">现代浏览器退出</button>
<button onclick="iefull()">低版本ie全屏</button>
</body>
<script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//全屏
function fullScreen(){
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
};
return;
}
//退出全屏
function exitScreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
if(typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
}
//ie低版本的全屏,退出全屏都这个方法
function iefull(){
var el = document.documentElement;
var rfs = el.msRequestFullScreen;
if(typeof window.ActiveXObject != "undefined") {
//这的方法 模拟f11键,使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
//注:ie调用ActiveX控件,需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本' 设置为启用
</script>
</html>
多浏览器兼容策略建议
在实际开发中,建议根据浏览器类型(如区分IE11、IE10及其他现代浏览器)动态控制全屏按钮的显示与隐藏,从而实现对各类浏览器的全屏功能兼容。
作者最新文章
JS怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载?前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系:Web前端三件套怎么协作
2026-11-04 15:41:40
