加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

fullscreenchange 事件

JavaScript基础 2022-06-08 12:00:02小码哥的IT人生shichen

fullscreenchange 事件

DOM 事件 Event 对象

实例

在全屏模式下查看页面时显示一些文本：

document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});

完整实例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myP {
  background-color: yellow;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>使用 JavaScript 实现全屏</h1>
<p>单击按钮以全屏模式打开此页面。</p>
<button onclick="openFullscreen();">进入全屏模式</button>
<button onclick="closeFullscreen();">关闭全屏</button>
<p><b>提示：</b>按 "Esc" 键退出全屏。</p>
<p id="myP">我会显示被触发的事件！</p>
<script>
/* 获取您希望全屏显示的元素 */ 
var elem = document.documentElement;
/* 开启全屏模式的函数 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem = window.top.document.body; //在 IE 中跳出框架
    elem.msRequestFullscreen();
  }
}
/* 关闭全屏模式的函数 */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    window.top.document.msExitFullscreen();
  }
}
// 事件
var output = document.getElementById("myP");
document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});
document.addEventListener("mozfullscreenchange", function() {
  output.innerHTML = "mozfullscreenchange event fired!";
});
document.addEventListener("webkitfullscreenchange", function() {
  output.innerHTML = "webkitfullscreenchange event fired!";
});
document.addEventListener("msfullscreenchange", function() {
  output.innerHTML = "msfullscreenchange event fired!";
});
</script>
<p class="note"><span>注释：</span>Internet Explorer 10 及更早版本不支持全屏模式。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

定义和用法

fullscreenchange 事件在以全屏模式查看元素时发生。

注释：此事件需要特定的前缀才能在不同的浏览器中工作（请参阅下面的更多实例）。

提示：请使用 element.requestFullscreen() 方法以全屏模式查看元素。

提示：请使用 element.exitFullscreen() 方法取消全屏模式。

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。 注释：每款浏览器都需要特定的前缀（请参阅括号内）：

事件 Chrome IE Firefox Safari Opera
fullscreenchange 45.0 (webkit) 11.0 (ms) 47.0 (moz) 5.1 (webkit) 15.0 (webkit)

示例代码：

供跨浏览器代码使用的前缀：

/* 标准语法 */
document.addEventListener("fullscreenchange", function() {
  ...
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function() {
  ...
});
/* Chrome, Safari 和 Opera */
document.addEventListener("webkitfullscreenchange", function() {
  ...
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function() {
  ...
});

完整实例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myP {
  background-color: yellow;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>使用 JavaScript 实现全屏</h1>
<p>单击按钮以全屏模式打开此页面。</p>
<button onclick="openFullscreen();">进入全屏模式</button>
<button onclick="closeFullscreen();">关闭全屏</button>
<p><b>提示：</b>按 "Esc" 键退出全屏。</p>
<p id="myP">我会显示被触发的事件！</p>
<script>
/* 获取您希望全屏显示的元素 */ 
var elem = document.documentElement;
/* 开启全屏模式的函数 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem = window.top.document.body; //在 IE 中跳出框架
    elem.msRequestFullscreen();
  }
}
/* 关闭全屏模式的函数 */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    window.top.document.msExitFullscreen();
  }
}
// 事件
var output = document.getElementById("myP");
document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});
document.addEventListener("mozfullscreenchange", function() {
  output.innerHTML = "mozfullscreenchange event fired!";
});
document.addEventListener("webkitfullscreenchange", function() {
  output.innerHTML = "webkitfullscreenchange event fired!";
});
document.addEventListener("msfullscreenchange", function() {
  output.innerHTML = "msfullscreenchange event fired!";
});
</script>
<p class="note"><span>注释：</span>Internet Explorer 10 及更早版本不支持全屏模式。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

语法

在 HTML 中：

<element onfullscreenchange="myScript">

在 JavaScript 中：

object.onfullscreenchange = function(){myScript};

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("fullscreenchange", myScript);

完整实例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myP {
  background-color: yellow;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>使用 JavaScript 实现全屏</h1>
<p>单击按钮以全屏模式打开此页面。</p>
<button onclick="openFullscreen();">进入全屏模式</button>
<button onclick="closeFullscreen();">关闭全屏</button>
<p><b>提示：</b>按 "Esc" 键退出全屏。</p>
<p id="myP">我会显示被触发的事件！</p>
<script>
/* 获取您希望全屏显示的元素 */ 
var elem = document.documentElement;
/* 开启全屏模式的函数 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem = window.top.document.body; //在 IE 中跳出框架
    elem.msRequestFullscreen();
  }
}
/* 关闭全屏模式的函数 */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    window.top.document.msExitFullscreen();
  }
}
// 事件
var output = document.getElementById("myP");
document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});
document.addEventListener("mozfullscreenchange", function() {
  output.innerHTML = "mozfullscreenchange event fired!";
});
document.addEventListener("webkitfullscreenchange", function() {
  output.innerHTML = "webkitfullscreenchange event fired!";
});
document.addEventListener("msfullscreenchange", function() {
  output.innerHTML = "msfullscreenchange event fired!";
});
</script>
<p class="note"><span>注释：</span>Internet Explorer 10 及更早版本不支持全屏模式。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技术细节

冒泡： 支持
可取消： 不支持
事件类型： Event
支持的 HTML 标签： 所有 HTML 元素
DOM 事件 Event 对象

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024