js 实现操作浏览器或者元素的全屏与退出全屏功能
<!DOCTYPE html>
<html lang="en" id="div1"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div style="background-color:red">
<button onclick="openww()">新窗口</button>
<button type="button" id="btn">全屏</button>
<button type="button" id="btn2">退出全屏</button>
</div> </body>
<script> function openww() {
// window.showModalDialog("./tanchuang01.html","Window", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");
window.open("http://baidu.com", "_blank", 'example02', 'channelmode');
// window.open ("./tanchuang01.html","newwindow","height=600,width=800");
// window.open("./tanchuang01.html", "_blank", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300")
// window.open('./tanchuang01.html', 'newwindow', 'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,fullscreen=1,scrollbars=no, resizable=no,location=no, status=no,directories=no')
} //全屏功能
document.getElementById("btn").onclick = function () {
var elem = document.getElementById("div1");
// elem.style.width = "100%";
// elem.style.height = "100%";
// elem.style.overflowY = "scroll";
requestFullScreen(elem); // 某个页面元素
//requestFullScreen(document.documentElement); // 整个网页
}; function requestFullScreen(element) {
// 判断各种浏览器，找到正确的方法
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //FireFox
element.mozRequestFullScreen || //Chrome等
element.msRequestFullscreen; //IE11
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏 判断浏览器种类 document.getElementById("btn2").onclick = function () {
exitFull();
}; function exitFull() {
// 判断各种浏览器，找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //FireFox
document.webkitExitFullscreen || //Chrome等
document.msExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
} }
</script> </html>
js 实现操作浏览器或者元素的全屏与退出全屏功能的更多相关文章
- JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...
- js控制全屏及退出全屏
js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...
- div的全屏与退出全屏
div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...
- android开发：全屏和退出全屏
android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...
- js之切换全屏和退出全屏实现
应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...
- Android动态的全屏和退出全屏
转自:http://chroya.iteye.com/blog/974031 让程序全屏的方法,大家都知道,那是静态的,程序运行之初就申明了.但是如果有这样的需求:要在程序运行的过程中,执行了某个操作 ...
- ng2 中的全屏与退出全屏
1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...
- Cordova 设置全屏及退出全屏切换
设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...
- 原生js实现浏览器全屏和退出全屏
全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...
随机推荐
- 虚拟机网络NAT模式配置静态IP
虚拟机网络连接方式 安装好虚拟机以后,在网络连接里面可以看到多了两块网卡: 其中VMnet1是虚拟机Host-only模式的网络接口,VMnet8是NAT模式的网络接口. 虚拟机常见有三种网络连接方式 ...
- 如何启动linux的telnet服务--转载
如何启动linux的telnet服务 如何启动linux的telnet服务 步骤如下: 1.如果安装了telnet.telnet-server的rpm包,就跳到2.,否则安装这个包. 2.修改teln ...
- BluePrism初尝
由于对工作的需求,现在开始接触了RPA. RPA是什么?第一次看见这个名词,我脑海里只有RPG的概念.一番查询,才知道是Robotic Process Automation的英文缩写,机器人流程自动化 ...
- 初读"Thinking in Java"读书笔记之第八章 --- 多态
再论向上转型 在某些方法中,仅接收基类作为参数,而不是特殊的导出类,会使得程序更容易扩展. 转机 方法调用绑定 前期绑定(编译期绑定):在编译期将一个方法调用和方法主体关联起来. 后期绑定(动态绑定或 ...
- 2018-2019-2 20175224 实验一《Java开发环境的熟悉》实验报告
实验报告封面 实验内容与步骤 Java开发环境的熟悉-1 1.建立“自己学号exp1”的目录 2.在“自己学号exp1”目录下建立src,bin等目录 3.javac.java的执行在“自己学号exp ...
- ios ionic3 跳转第三方地图 xcode加入白名单
之前我有篇随笔讲的是ionic3应用内跳转第三方地图应用的方法 忘了记录在ios内是需要把你用到的第三方地图应用加入跳转URL白名单内的 第三个是高德地图 iosamap 第四个是百度地图 baidu ...
- hadoop.docker.up.problems: Too many levels of symbolic links
#root@c7hp:~ excp c78 "zkServer.sh start"[1] 11:49:44 [FAILURE] c78 Exited with error code ...
- 互动科技 快乐分享 X/Open DTP——分布式事务模型
这一几天一直在回顾事务相关的知识,也准备把以前了解皮毛的知识进行一些深入总结,虽然这一些知识并没有用到,但是了解其实现原理还是很有必要的,因为知道了原理,你也能把它实现出来. 在上一节事务的编程模型里 ...
- QT_REQUIER_CONFIG
在qglobal.h中,定义了很多宏.下面这个QT_REQUIER_CONFIG,展开成: #define QT_REQUIRE_CONFIG(feature) Q_STATIC_ASSERT_X(Q ...
- CSS grid 模板
在gridCSS属性速记属性显式设置所有的网格性质(grid-template-rows,grid-template-columns,和grid-template-areas和所有的网格性质(隐式gr ...