js全屏事件fullscreenchange 实现全屏、退出全屏操作

本文实例为大家分享了js全屏事件fullscreenchange，实现全屏、退出全屏操作，供大家参考，具体内容如下

1.进入全屏

function launchFullscreen(element) {
 if (element.requestFullscreen) {
  element.requestFullscreen()
 } else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen()
 } else if (element.msRequestFullscreen) {
  element.msRequestFullscreen()
 } else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullScreen()
 }
}

launchFullscreen(document.documentElement) // 整个页面进入全屏
launchFullscreen(document.getElementById("id")) //某个元素进入全屏

2.退出全屏

function exitFullscreen() {
 if (document.exitFullscreen) {
  document.exitFullscreen()
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen()
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen()
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen()
 }
}
exitFullscreen()

3.全屏事件

document.addEventListener("fullscreenchange", function (e) {
 if (document.fullscreenElement) {
  console.log('进入全屏')
 } else {
  console.log('退出全屏')
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js控制页面的全屏展示和退出全屏显示的方法

    本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <body>    <div style="margin:0 auto;heig

  • Js浏览器全屏代码（模仿按F11）

    test function Fkey(){ var WsShell = new ActiveXObject('WScript.Shell') WsShell.SendKeys('{F11}'); } 屏幕切换 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js控制浏览器全屏示例代码

    复制代码 代码如下: function fullScreen() { var el = document.documentElement; var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; if (typeof rfs != "undefined" && rfs) { rfs.call(el)

  • javascript fullscreen全屏实现代码

    <script type="text/javascript" language="javascript"> function fullscreen() { win = window.open("Main.aspx","_blank","resizable=yes;status=yes;toolbar=no;location=no;menubar=no;directories=no;scrollbars=n

  • 利用浏览器全屏api实现js全屏

    复制代码 代码如下: (function () { var fullScreenApi = {  supportsFullScreen : false,  isFullScreen : function () {   return false;  },  requestFullScreen : function () {},  cancelFullScreen : function () {},  fullScreenEventName : '',  prefix : '' }, browser

  • JS 全屏和退出全屏详解及实例代码

    JS 全屏和退出全屏 js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧. <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

  • JavaScript全屏和退出全屏事件总结（附代码）

    代码如下: window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态 window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态 //跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态 function fullscreenEnable(){ var isFullscreen = document.fullscreenEnabled || win

  • JS实现全屏的四种写法

    JS或jQuery实现全屏 JS写法一 .html <div class="container" <button id="full-screen">全屏</button> <button id="exit-fullscreen">退出</button> </div> .css /* Basic element styles */ html { color: #000; backgr

  • js全屏显示显示代码的三种方法

    第一种:       在已经打开的一个普通网页上,点击"全屏显示",然后进入该网页对应的全屏模式.方法为:在网页的<body>与</body>之间加入以下代码: 复制代码 代码如下: <form><input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location,

  • js全屏事件fullscreenchange 实现全屏、退出全屏操作

    本文实例为大家分享了js全屏事件fullscreenchange,实现全屏.退出全屏操作,供大家参考,具体内容如下 1.进入全屏 function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (el

  • vue全屏事件开发详解

    本文实例为大家分享了vue全屏事件开发的具体代码,供大家参考,具体内容如下 在项目中有需求相应浏览器全屏,写了个案例代码 先看看效果吧 全屏显示: html代码: <!-- el-tooltip 文字提示 --> <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscr

  • vue中对监听esc事件和退出全屏问题的解决方案

    vue中对监听esc事件和退出全屏问题的解决方案

    目录 对监听esc事件和退出全屏问题的解决 下面是全屏的完整代码 element+vue全屏与退出全屏(监听ESC改样式) 一.效果 二.代码 对监听esc事件和退出全屏问题的解决 vue 的项目中使用了 h5 的全屏 API,在使用esc键退出全屏时,默认调用“ document.exitFullScreen() ” 直接退出,想要做监听并设置业务,需要监听屏幕size变化来出发事件 mounted() {          let that = this     window.addEven

  • js之切换全屏和退出全屏实现代码实例

    这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 应用场景: 比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen").html("退出全屏"); var docElm = document.documentElement; //W3C if

  • vue中实现全屏以及对退出全屏的监听

    vue中实现全屏以及对退出全屏的监听

    目录 前言: 实现步骤: 完整源码: 更多资料: 前言: vue中实现默认进来页面,某个div全屏,并监听退出全屏的次数,当退出全屏次数达到5的时候跳转到别的页面. 实现步骤: 1.页面上在你想要的容器上加上id = 'con_lf_top_div',再给他加个动态class名,加上提示和点击进入全屏按钮 <template> <el-card shadow="never" class="examining" v-loading.fullscree

  • js实现滑动触屏事件监听的方法

    本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top

  • android编程开发之全屏和退出全屏的实现方法

    本文实例讲述了android编程开发之全屏和退出全屏的实现方法.分享给大家供大家参考,具体如下: xml代码: <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fullscreen" android:onClick

随机推荐