2 hubei8722 hubei8722 于 2016.01.14 17:28 提问

js点击某一个链接交替执行两个函数(js实现网页全屏问题)

想实现的需求:
1、网页上有个“全屏显示”按钮(链接),点击全屏后执行函数fullScreen(),然后“显示全屏”二字变成“退出全屏”;
2、点击“退出全屏”执行函数exitFullScreen(),然后“退出全屏”变为“全屏显示”

function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
el.mozRequestFullScreen || el.msRequestFullScreen;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if(typeof window.ActiveXObject != "undefined") {
//for IE,这里其实就是模拟了按下键盘的F11,使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
function exitFullScreen() {
var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
el.mozCancelFullScreen || el.exitFullScreen;
if(typeof cfs != "undefined" && cfs) {
cfs.call(el);
} else if(typeof window.ActiveXObject != "undefined") {
//for IE,这里和fullScreen相同,模拟按下F11键退出全屏
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null) {
wscript.SendKeys("{F11}");
}
}
}

2个回答

showbo
showbo   Ds   Rxr 2016.01.14 17:52
已采纳
 <a href="#" onclick="return ExecuteFun(this)">全屏显示</a>
<script>
    function ExecuteFun(a) {
        var full = a.innerHTML == '全屏显示';
        full ? fullScreen() : exitFullScreen();
        a.innerHTML = full ? '退出全屏' : '全屏显示';
        return false;
    }
    function fullScreen() {
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
        el.mozRequestFullScreen || el.msRequestFullScreen;
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(el);
        } else if (typeof window.ActiveXObject != "undefined") {
            //for IE,这里其实就是模拟了按下键盘的F11,使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    function exitFullScreen() {
        var el = document;
        var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
        el.mozCancelFullScreen || el.exitFullScreen;
        if (typeof cfs != "undefined" && cfs) {
            cfs.call(el);
        } else if (typeof window.ActiveXObject != "undefined") {
            //for IE,这里和fullScreen相同,模拟按下F11键退出全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
</script>
hubei8722
hubei8722 完美!!
2 年多之前 回复
sunyake1212
sunyake1212   2016.01.14 17:52

$(selector).toggle(fullScreen(),exitFullScreen())

sunyake1212
sunyake1212 这个更方便啊
2 年多之前 回复
sunyake1212
sunyake1212 这个更方便啊
2 年多之前 回复
hubei8722
hubei8722 谢谢
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js实现窗口全屏示例
前言 该 demo 包含全屏事件、退出全屏事件以及屏幕状态改变的钩子函数的封装 以下是一个完整示例,只需整体拷贝下来运行即可(注意引入了 jquery) 示例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery-1.11
jquery中交替点击事件的实现
$('#clickId‘).toggle(     function(){$('#divId').hide();},     function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件。如果不传参默认是显示隐藏功能
js 实现全屏飘雪花 两个
简单易懂js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个 js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个
将屏幕分为4个DIV 点击某一个div时 全屏显示
<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /> <html><br />   <head><br />     <title>测试DIV页面</title><br />     <br />     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><br />     <meta http-equiv="desc
用Html5 or JS实现点击一个按钮达到浏览器全屏效果
点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果 项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox1
JS实现网页全屏与退出全屏
$('#alarm-fullscreen-toggler').on('click', function(e) { var element = document.documentElement; if (!$('body').hasClass("full-screen")) { $('body').addClass("full-screen"); $('#alarm-fullsc
js实现页面全屏
js通过点击事件触发全屏函数,实现页面全屏效果,相当于按下键盘F11的效果
JS实现全屏页面切换
以前在网上看到过一些全屏切换的页面,网上也有一些JQuery的插件能够实现全屏切换的效果,今天用原生js简单的做了一下这个效果。1.实现原理其实要做出这个效果还是挺简单的,下面来分析一下: 1.首先设置每个页面的div,让每个div的高度设置为100vh,即让每个div高度为窗口高度,或者可以设置每个div的高度为100%,但100%是相对父元素而言的,所以还需要给HTML、body的高度都设置为
JS定时器来间断性的执行函数
使用JS定时器来间断性的执行函数: setTimeout("MyAutoRun()",1000); //隔1000毫秒就执行一次MyAutoRun()函数  实现方法,将最上面的那JS函数,改为:functionn MyAutoRun()   {    //以下是您的函数的代码,请自行修改先!    alert("函数自动执行哦!");   }   setTimeout("My
利用js如何做到让页面全屏和不全屏功能
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。 以下demo是页面进行全屏和正常屏幕的,你也可以用元素来进行全屏,当然 只有包含在顶层文档(top-level document)内部的标准HTML元素、元素和元素,以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素,以及obje