众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外。看代码:

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}");

    }

  }
}

下面是个简单的例子(假设上面的代码保存在script.js文件中):在按钮中调用这个函数即可实现:

<html>

<head>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div style="margin-top:50px"> <!-- 设置margin-top是为了查看IE全屏前后的区别 -->

  <input type="button" value="FullScreen" onclick="fullScreen()" />

  <input type="button" value="ExitFullScreen" onclick="exitFullScreen()" />

</div>

</body>

</html>

兼容IE浏览器的js浏览器全屏代码的更多相关文章

  1. chrome浏览器 配置开机启动全屏(看板app模式设置)

        chrome浏览器 配置开机启动全屏(看板app模式设置) 1.下载安装chrome浏览器. 2.建立一个chrome浏览器的快键方式,右键打开属性,如下图: 3.将目标选项卡的值修改为:&q ...

  2. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  3. fullpage.js jq全屏滚动插件

    fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下 ...

  4. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  5. js 切换全屏

    公司有一个需求就是点击某一个按钮实现全屏切换功能,然后呢我就在网上扒了段代码.封装了一下.使用的小伙伴们可以看看哦! 切换全屏代码 <!DOCTYPE html> <html> ...

  6. 天猫装修-全屏代码,和去掉10px

    淘宝装修,不支持float,和position属性 全屏代码 <div style="height:685px;"> <div style="paddi ...

  7. js 实现操作浏览器或者元素的全屏与退出全屏功能

    <!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...

  8. c# 调用浏览器打开网址并全屏

    关键性参数 Google Chrome浏览器 Process process = Process.Start("chrome.exe", " --kiosk " ...

  9. Extjs 疑难杂症 (LoadMark 遮罩、Panel Update无效、chrome浏览器date控件全屏)

    一.在extjs gridPanel中使用LoadMark无效,三步搞定. 原代码: grid = new Ext.grid.GridPanel({ store: store, title:'资料列表 ...

随机推荐

  1. 微信 5.3 for iPhone已放出 微信iphone版更新下载

    就在几个小时前,微信发布了更新,本次只放出微信 5.3 for iPhone,距离发布微信5.3内测版也就几天时间.和往常一样微信iphone版先发布,微信android版延后发布,微信看重的是ios ...

  2. (PPT)Linux服务器基础

  3. 【Alpha版本】 第一天 11.7

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 前段时间完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 部分APP功能 我要招聘详情的展示 注册界面的实现 一些特殊效 ...

  4. HDU 3333 | Codeforces 703D 树状数组、离散化

    HDU 3333:http://acm.hdu.edu.cn/showproblem.php?pid=3333 这两个题是类似的,都是离线处理查询,对每次查询的区间的右端点进行排序.这里我们需要离散化 ...

  5. yii2事务运用举例

    直接上代码: $db = Yii::$app->db; $transaction = $db->beginTransaction(); //开启事务 try { // 更新member表 ...

  6. java2

    1:关键字(掌握) (1)被Java语言赋予特定含义的单词 (2)特点: 全部小写. (3)注意事项: A:goto和const作为保留字存在. B:类似于Notepad++这样的高级记事本会对关键字 ...

  7. RobotFrameWork(二)Ride简单使用及快捷键

    一.简单示例 注意:以下操作使用到快捷键的,请先确保没有与其他软件的快捷键设置冲突,比如sogou拼音.有道词典等等 1.启动ride 启动ride方法: 1)  通过界面图标 2)  dos命令行: ...

  8. myEclipse svn插件安装

    方法一(liuyou在安装时报空指针异常) 1.打开HELP->MyEclipse Configuration Center,切换到SoftWare标签页. 2.点击Add Site 打开对话框 ...

  9. ionic扩展插件

    1.ionic-timepicker 时间选择 https://github.com/rajeshwarpatlolla/ionic-timepicker   2.ionic-datepicker 日 ...

  10. 各大就业网站对web前端的就业要求

    今日与女神有约,在[web前端学习部落22群]有直播公开课,喜欢的朋友赶紧加入吧!随着高等教育的普及,高校毕业生的人数每年都以极快的速度增长,数据显示,2016年,高校毕业生多达765万人,比2015 ...