正文

js实现全屏预览（f11功能）--转

ghfjj  2022-02-08  420

关键词：

js代码

 1 function fullScreen(el) {  
 2     var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,  
 3         wscript;  
 4    
 5     if(typeof rfs != "undefined" && rfs) {  
 6         rfs.call(el);  
 7         return;  
 8     }  
 9    
10     if(typeof window.ActiveXObject != "undefined") {  
11         wscript = new ActiveXObject("WScript.Shell");  
12         if(wscript) {  
13             wscript.SendKeys("{F11}");  
14         }  
15     }  
16 }  
17   
18 function exitFullScreen(el) {  
19     var el= document,  
20         cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,  
21         wscript;  
22    
23     if (typeof cfs != "undefined" && cfs) {  
24       cfs.call(el);  
25       return;  
26     }  
27    
28     if (typeof window.ActiveXObject != "undefined") {  
29         wscript = new ActiveXObject("WScript.Shell");  
30         if (wscript != null) {  
31             wscript.SendKeys("{F11}");  
32         }  
33   }  
34 }

html 代码

1 <button id=‘btn‘>全屏按钮</button>  
2         <div id="content" style="background:yellow;width:500px;height:500px;">sljfsdlfj  
3             <div id="quite" class="btn">退出全屏</div>  
4         </div>

调用

var btn = document.getElementById(‘btn‘);  
        var content = document.getElementById(‘content‘);  
        btn.onclick = function(){  
            fullScreen(content);  
        }  
        var quite = document.getElementById(‘quite‘);  
        quite.onclick = function(){  
            exitFullScreen();  
        }

　　不仅可以实现整个document 全屏预览还能实现特定的div来进行全屏预览

转：http://blog.csdn.net/wu595679200/article/details/51195142

vue+iframe实现点击f11全屏效果

参考技术A在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏。目前只有googlechrome15+,safri5.1+,firfox10+,IE11支持父页面如果是Iframe嵌套内容，只需要在iframe中加入属性当然，如果是iframe... 查看详情

浏览器全屏之requestfullscreen全屏与f11全屏(代码片段)

...式，一种是HTML5新增的requestFullscreen全屏，另一种是摁F11实现的全屏，本文将详解两种全屏的特点以及其实现。二、requestFullscreen全屏　　1、判断是否支持全屏　　通过判断元素的requestFullscreen函数是否存在与document.fullscreenEnabled... 查看详情

js实现的图片预览功能

之前的博文有实现过图片上传预览，但那种方法是预览时就将图片上传，会产生很大的浪费空间。找到了之前有人写的用JS实现的图片预览，就说用js将上传的图片显示，上传代码在之前的博文中有写到。以下是实现的代码：body... 查看详情

js通过使用pdfjs实现基于文件流的预览功能

需求：使用JS实现PDF文件预览功能备选方案：使用ViewerJS，官网 http://viewerjs.org/使用PDFJS,官网 https://mozilla.github.io/pdf.js/结论：通过研究发现，ViewerJS预览pdf文件，其pdf文件只能url地址，不支持获取文件流到客户端，生成blob... 查看详情

原生js实现ajax的文件异步提交功能图片预览功能.实例

<%--CreatedbyIntelliJIDEA.User:yhDate:2016/12/14Time:17:13TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><%@includef 查看详情

网页全屏以及禁用f11默认行为-vue项目

参考技术A我在写网页全屏时候发现，通过按键F11打开的全屏貌似使用脚本无法正确关闭。具体表现是，按键F11会打开全屏，这个时候打印window对象中的window.document，会发现window.document下面的有关全屏的属性并未改变，window.documen... 查看详情

怎么使chrome全屏的代码

chrome上实现全屏非常简单，不是通过在网页中插入js代码实现，而是在chrome的快捷方式上做手脚。下面我以XP系统为演示：安装了chrome以后，chrome会自动在桌面生成一个快捷方式，右键点击后我们可以看到一些东西，其中有一项... 查看详情

js实现图片上传预览功能，使用base64编码来实现

实现图片上传的方法有很多，这里我们介绍比较简单的一种，使用base64对图片信息进行编码，然后直接将图片的base64信息存到数据库。但是对于系统中需要上传的图片较多时并不建议采用这种方式，我们一般会选择存图片路径的... 查看详情

openoffice+jquery.media.js实现文档在线预览

1.功能：　　实现Windows环境下文档在线预览功能，支持.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf格式的文档，对IE浏览器不太兼容。如要实现Linux环境下文档在线预览功能，改变相应配置和代码，要安装Linux版的OpenOffice。2.所需组件... 查看详情

js的dom操作之js实现图片预览功能，手机端电脑端通用(代码片段)

...想做搬运工】前端用的layui，连个可连续预览图片的实现办法都没有，那么只得自己写代码了。【思路】电脑端效果：手机端效果：实现的方式就是，传入一个图片路径数组和当前预览图片的id（或索引值&#... 查看详情

小书匠预览操作说明

...了更加准确的定位算法，解决了这种弊端。同步滚动演示全屏预览点击预览区右侧的全屏按钮，进入禅全屏预览模式。退出禅模式全屏，可以点击右侧的退出全屏按钮来退出禅全屏模式。全屏预览演示大纲大纲操作界面允许用户... 查看详情

小书匠预览操作说明

浅谈js本地图片预览

　　最近在工作中遇到一个问题，就是实现一个反馈页面，这个反馈页面的元素有反馈主题、反馈类型、反馈内容、反馈人联系电话以及反馈图片。前端将这些反馈的元素POST给后台提供的接口；实现这个工作的步骤就是：页面... 查看详情

用openoffice+jodconverter+webuploader+pdf.js实现文件上传在线预览功能

一、背景　　最近公司一个项目要实现一个文件上传以及多文档在线预览的功能，之前一直做无线工具开发的，没有涉及到这些东西。另外项目组缺java开发人员，而且自己也只是一个半吊子前端加小半吊子java开发人员，所以让... 查看详情

js面向对象方法面向对象方法实现橱窗式图面预览以及放大功能

效果图： HTML结构如下：<divid="preview"><divid="mediumDiv"><imgid="mImg"src="images/products/product-s1-m.jpg"/><divid="mask"></div><divid="superMask"></ 查看详情

js打印功能代码可实现打印预览打印设置等

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-e 查看详情

gvim全屏f11(代码片段)

下载https://github.com/derekmcloughlin/gvimfullscreen_win32https://github.com/mattn/vimtweak配置放到gvim根目录64位用64位的//全屏设置:calllibcallnr("gvimfullscreen_64.dll","ToggleFullScreen",0)map<F1 查看详情