js打开网页全屏显示

合集下载

jquery fullscreen 用法

一、概述随着互联网的发展，网页设计和开发变得越来越重要。

其中，jQuery 作为一种流行的JavaScript库，为开发者提供了丰富的功能和工具。

其中，全屏模式是网页设计中常见的功能之一，它能够让用户全屏浏览网页内容，提升用户体验。

本文将介绍jQuery fullscreen的用法，帮助开发者更好地实现全屏功能。

二、使用方法1. 引入jQuery库需要在网页中引入jQuery库。

可以通过CDN方式引入，也可以下载jQuery库文件后引入到网页中。

确保在引入jQuery fullscreen插件前已经引入了jQuery库。

2. 引入jQuery fullscreen插件在引入了jQuery库之后，需要引入jQuery fullscreen插件。

可以通过CDN方式引入，也可以下载插件文件后引入到网页中。

确保在使用该插件之前已经引入了jQuery库和该插件。

3. 初始化全屏功能在引入了jQuery库和jQuery fullscreen插件后，需要初始化全屏功能。

可以通过下面的代码实现：```javascript$(document).ready(function(){$('#element').fullscreen();});```其中，`#element`是需要实现全屏的元素，可以是一个div、图片或是整个页面的body。

4. 自定义全屏按钮如果需要自定义全屏按钮，可以通过下面的代码实现：```javascript$('#fullscreen_btn').click(function(){$('#element').fullscreen(true);});```其中，`#fullscreen_btn`是自定义的全屏按钮元素，`#element`是需要实现全屏的元素。

5. 退出全屏用户在全屏模式下，可能会需要退出全屏。

可以通过下面的代码实现：```javascript$(document).on('fullscreenchange', function(){ if(!document.fullscreenElement){// 退出全屏后的操作}});```6. 监听全屏变化可以通过下面的代码监听全屏变化：```javascript$(document).on('fullscreenchange', function(){ if(document.fullscreenElement){// 进入全屏后的操作} else {// 退出全屏后的操作}});```三、使用注意事项1. 兼容性jQuery fullscreen插件的兼容性较好，能够支持大部分主流浏览器。

jQuery插件fullPage.js实现全屏滚动效果

jQuery插件fullPage.js实现全屏滚动效果本⽂实例为⼤家分享了全屏滚动插件fullPage.js的具体使⽤⽅法，供⼤家参考，具体内容如下0.01 基本演⽰的HTML 布局以及js 代码//需要连接连接的三个⽂件<link rel="stylesheet" href="css/jquery.fullPage.css"> //css⽂件<script src="js/jquery-1.8.3.min.js"></script> //jQuery 1.8.3的版本<script src="js/jquery.fullPage.min.js"></script> //fullPage插件的压缩版本<style>.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} //可以改动设置的是⽹页中的⽂字 <⽆关紧要></style><script>$(function(){$('#dowebok').fullpage({//fullpage ⽐较重要设置的是插件的基本设置后⾯的sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']//sectionsColor 当没有背景图⽚的时候这个就是设置背景颜⾊的否则就是空⽩数组的形式中间以逗号隔开颜⾊不管是⼗六进制还是英⽂单词都需要⽤单引号包着 });});</script><div id="dowebok"> //绑定的⼤盒⼦设置滚动的盒⼦<div class="section"><h3>第⼀屏</h3><p>fullPage.js — 基本演⽰</p></div><div class="section"> //滚动的第⼆屏幕如果在⾥⾯添加div和slide的样式就可以增加横向点击<div class="slide"><h3>第⼆屏的第⼀屏</h3></div><div class="slide"><h3>第⼆屏的第⼆屏</h3></div><div class="slide"><h3>第⼆屏的第三屏</h3></div></div><div class="section"><h3>第三屏</h3></div><div class="section"><h3>第四屏</h3><p>这是最后⼀屏</p></div></div>0.02 插⼊背景图⽚演⽰的HTML 布局以及js 代码 <需要链接的⽂件都是⼀样的><style> //需要注意的是这⾥没有设置颜⾊⽽是在css中设置的背景图⽚0.section1 { background: url(images/1.jpg) 50%;}.section2 { background: url(images/2.jpg) 50%;}.section3 { background: url(images/3.jpg) 50%;}.section4 { background: url(images/4.jpg) 50%;}</style><script>$(function(){$('#dowebok').fullpage(); //找到⼤盒⼦设置fullpage全屏滚动});</script><div id="dowebok"><div class="section section1"></div><div class="section section2"></div><div class="section section3"></div><div class="section section4"></div></div>0.03 循环演⽰ html 布局以及js代码 <需要链接的⽂件都是⼀样的><script>$(function(){$('#dowebok').fullpage({sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //和上⾯⼀样 sectionsColor 是设置每⼀屏的颜⾊必须⽤逗号隔开单引号包着continuousVertical: false, //设置是否滑到底层再往下滚动是第⼀张图设置true是执⾏此操作设置false是不执⾏默认不执⾏不执⾏就不设置});});</script><div id="dowebok"><div class="section"><h3>第⼀屏</h3><p>fullPage.js — 循环演⽰</p></div><div class="section"><h3>第⼆屏</h3><div class="section"><h3>第三屏</h3></div><div class="section"><h3>第四屏</h3><p>这是最后⼀屏了，继续往下滚返回第⼀屏</p></div></div>0.04 回调函数演⽰<title>fullPage.js — 回调函数演⽰</title><link rel="stylesheet" href="css/jquery.fullPage.css"><style>.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}.section2 p { position: relative; left: -120%;}.section3 p { position: relative; bottom: -120%;}.section4 p { display: none;}</style><script src="js/jquery.min.js"></script><script src="js/jquery-ui.js"></script><script src="js/jquery.fullPage.js"></script><script>$(function(){$('#dowebok').fullpage({sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],//设置背景颜⾊afterLoad: function(anchorLink, index){//滚动到某⼀屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 if(index == 2){$('.section2').find('p').delay(500).animate({//find('p') 搜索所有段落中的后代 p 元素//delay(500)其中参数为延时值，它的单位是毫秒//animate() ⽅法执⾏ CSS 属性集的⾃定义动画left: '0'}, 1500, 'easeOutExpo'); //jQuery Easing 动画效果扩展}if(index == 3){$('.section3').find('p').delay(500).animate({bottom: '0'}, 1500, 'easeOutExpo');}if(index == 4){$('.section4').find('p').fadeIn(2000);//fadeIn() ⽅法逐渐改变被选元素的不透明度，从隐藏到可见（褪⾊效果）}},onLeave: function(index, direction){//滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页⾯”的序号，从1开始计算；//nextIndex 是滚动到的“页⾯”的序号，从1开始计算；//direction 判断往上滚动还是往下滚动，值是 up 或 down。

js打开网页全屏显示

打开网页全屏显示关键字: js、javascript、打开网页全屏显示Js代码1.（1）打开全屏窗口2.方法如下：3.一：将下面的代码放在<HEAD>与</HEAD>之间4.<script language="JavaScript">5.</script>11.12.二：将下面的代码复制到〈BODY〉区并修改其中的链接地址和名称。

13.<a href=/horsewhite onclick='return call(this.href);'>全屏显示</a>14.15.（2）实现真正的全屏16.这种方法需按Alt+F4才能关闭。

17.代码如下：18.<html>19.<head>20.<meta http-equiv="Content-Type" content="text/html; charset=gb2312">21.<title>全屏显示</title>22.</head>23.<body background=#00ccff>24.<table border="1" width="100%">25.<tr>26.<td>27.<p align="center">28.<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, 'www_helpor_net', 'fu llscreen')">29.</td>30.</tr>31.</table>32.</body>33.</html>34.35.（3）效果同上36.将下面的代码贴到body之间，即可实现同上的效果，关闭的方法也同上。

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

JS全屏和退出全屏详解及实例代码JS 全屏和退出全屏js实现浏览器窗⼝全屏和退出全屏的功能，市⾯上主流浏览器如：⾕歌、⽕狐、360等都是兼容的，不过IE低版本有点瑕疵（全屏状态下仍有底部的状态栏）。

这个demo基本是够了，直接复制下⾯的源码另存为html⽂件看效果吧。

<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js全屏和退出全屏代码</title><body><button onclick="requestFullScreen(document.documentElement)">全屏显⽰</button><button onclick="exitFull()">退出全屏</button></body><script type="text/javascript">function requestFullScreen(element) {// 判断各种浏览器，找到正确的⽅法var requestMethod = element.requestFullScreen || //W3Celement.webkitRequestFullScreen || //Chrome等element.mozRequestFullScreen || //FireFoxelement.msRequestFullScreen; //IE11if (requestMethod) {requestMethod.call(element);}else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorervar wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}}}//退出全屏判断浏览器种类function exitFull() {// 判断各种浏览器，找到正确的⽅法var exitMethod = document.exitFullscreen || //W3Cdocument.mozCancelFullScreen || //Chrome等document.webkitExitFullscreen || //FireFoxdocument.webkitExitFullscreen; //IE11if (exitMethod) {exitMethod.call(document);}else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorervar wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}}}</script></html>感谢阅读，希望嫩帮助到⼤家，谢谢⼤家对本站的⽀持！以下是其它⽹友的补充我们知道，浏览器全屏通常按快捷键F11。

js弹窗插件,iframe中可实现全屏弹窗

目录弹窗效果截图(可自定义效果) (2)相关说明 (3)开发说明 (3)附件 (6)弹窗效果截图(可自定义效果)在iframe中的弹窗在整单页中的弹窗相关说明该插件必须配合jquery使用，并且要实现弹窗效果，在IE中直接调用后即可实现，非IE内核，切记由于内核不同的限制，Chrome内核会限制父子页面中的相互调用，只有把页面发布在web中间件（tomcat,jetty,was,weblogic…..）时才会有效果，切记！开发说明本插件采用了单例设计模式！首先引入jquery以及myWindow.js显示弹窗:L.show(params);Eg:L.show({title:”用户信息”,content:”张三李四王麻子”,height:”200px”,width:”200px”});效果：参数(params)说明:title:所显示的标题content:所显示的内容allowClose:”yes/no”显示关闭按钮enableHTML:”yes/no”,内容解析成html还是单纯的文字width:弹窗的宽度height:弹窗的高度buttons:json数据,如，buttons:[{text:”按钮1”,eve:stop},{text:”按钮2”,eve:start}],其中text 是按钮的名字，eve就是点击这个按钮所触发的事件,要求：只要事件名称，不要跟”()”,也就是说如果你要调用本页面的stop()方法，那么eve就配置：eve:stop,切记mask:”yes/no”是否需要蒙版效果另外，除L.show()外，还有以下方法可供使用L.close():关闭当前窗口L. getWindow():获取窗体dom对象L.getContent()：获取窗体中内容dom对象L.getTitle():获取窗体中标题dom对象L.setContent(content,allowHtml):设置显示内容，content:内容，allowHmtl=”yes/no”或true/false是否把内容解析成htmlL.setTitle(title):设置窗体的标题附件example.zip。

JS控制全屏，监听退出全屏事件

JS控制全屏，监听退出全屏事件实现⽅案//进⼊全屏function requestFullScreen(de) {if(de.requestFullscreen){//W3Cde.requestFullscreen();}else if (de.mozRequestFullScreen){//FIREFOXde.mozRequestFullScreen();}else if (de.webkitRequestFullScreen){//CHROMEde.webkitRequestFullScreen();}else if (de.msRequestFullscreen){//MSIEde.msRequestFullscreen();}else if(element.oRequestFullscreen){element.oRequestFullscreen();}else{var docHtml = document.documentElement;var docBody = document.body;var videobox = document.getElementById('playerBox');var cssText = 'width:100%;height:100%;overflow:hidden;';docHtml.style.cssText = cssText;docBody.style.cssText = cssText;videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';document.IsFullScreen = true;}}//退出全屏function exitFullscreen(de) {if (de.exitFullscreen) {//W3Cde.exitFullscreen();}else if(de.mozCancelFullScreen){//FIREFOXde.mozCancelFullScreen();}else if(de.webkitCancelFullScreen){//CHROMEde.webkitCancelFullScreen();}else if(de.msExitFullscreen){//MSIEde.msExitFullscreen();}else if(de.oRequestFullscreen){de.oCancelFullScreen();}else{var docHtml = document.documentElement;var docBody = document.body;var videobox = document.getElementById('playerBox');docHtml.style.cssText = "";docBody.style.cssText = "";videobox.style.cssText = "";document.IsFullScreen = false;}}上⾯的⽅案，⼀堆if...else...，看起来实在不爽，下⾯是根据⼤神⽅案优化后的⽅案//全屏功能document.getElementById("ck_buts").onclick = function() {var elem = document.getElementById("dashboard_id");elem.style.width = "100%";elem.style.height = "100%";elem.style.overflowY = "scroll";requestFullScreen(elem); // 某个页⾯元素//requestFullScreen(document.documentElement); // 整个⽹页};function requestFullScreen(element) {// 判断各种浏览器，找到正确的⽅法var requestMethod = element.requestFullScreen || //W3Celement.webkitRequestFullScreen || //FireFoxelement.mozRequestFullScreen || //Chrome等element.msRequestFullScreen; //IE11if (requestMethod) {requestMethod.call(element);} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorervar wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}}}//退出全屏判断浏览器种类function exitFull() {// 判断各种浏览器，找到正确的⽅法var exitMethod = document.exitFullscreen || //W3Cdocument.mozCancelFullScreen || //FireFoxdocument.webkitExitFullscreen || //Chrome等document.webkitExitFullscreen; //IE11if (exitMethod) {exitMethod.call(document);} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorervar wscript = new ActiveXObject("WScript.Shell");if (wscript !== null) {wscript.SendKeys("{F11}");}}}监听退出全屏事件//监听退出全屏事件window.onresize = function() {if (!checkFull()) {//要执⾏的动作$("#dashboard_id").removeClass('expand').addClass('contract');//这⾥捡个懒，直接⽤JQ来改className}}function checkFull() {var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;//to fix : false || undefined == undefinedif (isFull === undefined) {isFull = false;}return isFull;}。

screenfull.js实现原理

screenfull.js实现原理screenfull.js是一款用于处理全屏模式的JavaScript库，它可以帮助开发者轻松地实现全屏切换、退出等功能。

下面将详细介绍screenfull.js的实现原理。

一、概述screenfull.js基于HTML5的全屏API，提供了一组简洁的API，用于控制网页的全屏模式。

它能够兼容各种浏览器，包括IE、Chrome、Firefox等主流浏览器。

二、工作原理screenfull.js的工作原理主要基于以下步骤：1.检测设备是否支持全屏模式：screenfull.js首先会检测设备是否支持全屏模式，可以通过检查用户代理字符串或使用window.fullScreenAPI来实现。

2.初始化全屏状态：如果设备支持全屏模式，screenfull.js会初始化全屏状态，包括全屏标志位、全屏事件等。

3.提供API接口：screenfull.js提供了几个简单的API接口，包括requestFullscreen()、exitFullscreen()等，用于控制网页的全屏状态。

这些接口可以方便地嵌入到网页中，实现全屏切换等功能。

4.处理全屏事件：screenfull.js还提供了几个事件，如fullscreenchange、fullscreenerror等，用于处理全屏状态的改变和异常情况。

当全屏状态改变时，这些事件会被触发，开发者可以通过监听这些事件来实现一些额外的功能。

三、核心技术点screenfull.js的核心技术点包括以下几个方面：1.兼容性处理：screenfull.js支持各种主流浏览器，通过使用条件注释、浏览器检测等技术，实现了对不同浏览器的兼容性处理。

2.全屏状态的保存和恢复：screenfull.js能够保存和恢复全屏状态，当用户退出全屏模式时，能够自动恢复到之前的全屏状态。

3.事件处理：screenfull.js能够正确处理全屏事件，包括fullscreenchange、fullscreenerror等事件，能够根据不同的场景做出相应的响应。

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

js全屏显⽰显⽰代码的三种⽅法第⼀种：在已经打开的⼀个普通⽹页上，点击“全屏显⽰”，然后进⼊该⽹页对应的全屏模式。

⽅法为：在⽹页的<body>与</body>之间加⼊以下代码：复制代码代码如下:<form><input type="BUTTON" name="FullScreen" value="全屏显⽰" onClick="window.open(document.location, 'big','fullscreen=yes')"></form>如果全屏显⽰的不是本页，则只需要把document.location换为对应的⽹址即可，即如下代码：复制代码代码如下:<form><input type=BUTTON name=FullScreen value=全屏显⽰ onClick="window.open('URL地址','big','fullscreen=yes')"></form>第⼆种：在运⾏⼀个⽹页时，⽐如你在⽹址栏⾥直接输⼊：http://localhost:8080/temp.jsp，此时关闭该⽹页，同时显⽰⼀个空⽩的全屏⽹页，⽅法为：在body⾥写如下代码：复制代码代码如下:<body onload=window.open('','',fullscreen=1);opener=null;window.close()></body>第三种：其实就是以上两种的叠加，⼀般这种情况也⽤的⽐较多。

就是直接打开⼀个⽹页的时候，就进⼊它的全屏模式，这种情况就和第⼀种不同了，因为第⼀种，当你点击了“全屏显⽰”按钮后，它是新打开⼀个全屏的⽹页，但是原来普通的那个⽹页仍然有，所以，这个就⽐较好⼀些。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

13.<a href=/horsewhite onclick='return call(this.href);'>全屏显示</a>14.15.（2）实现真正的全屏16.这种方法需按Alt+F4才能关闭。

37.<INPUT onclick="window.open(document.location, 'www_helpor_net', 'fullscreen')" type=button value=全屏显示 name=FullScreen>38.<SCRIPT language=JavaScript>39.44.</SCRIPT>45.46.详解下列收集的代码：47.（4）瞒天过海法-javascript48.49.我们知道，显示器的分辩率大小决定了我们看到的程序窗口的面积大小，分辩率越大，窗口面积越大，看到的内容就越多。

但并不是说显示面积越大就越好，因为分辩率的变化会带来菜单文字的变化，可能会影响软件界面的字体美观。

此乃题外话，就不细说了。

浏览器同样是一种程序，其窗口的大小，我们可以利用脚本语言来控制调整，这样我们就可以实施瞒天过海法来达到全屏目的，方法是在网页文件的头部，也就是 < head > 与 < /head > 标签之间加上下面这段 javascript 代码：50.< script >51.< !--52.function omiga_window(){53.window.open("12.htm","","fullscreen=1,menubar=0,toolbar=0,directories=0,location=0,54.status=0,scrollbars=0")55.}56.//-- >57.< /script >58.代码功能是由一个网页调出另一个浏览器窗口，加上设置语句，设置新窗口的大小为全屏，然后新的网页内容就显示在此窗口里，借此实现了全屏。

59.不要忘记在网页文件的 < body > 标签里加上加载网页里调用函数的代码。

代码设置如下：60.<body onload="omiga_window()" onBlur="self.close()" scroll="no">61.62.（5）借尸还魂法63.64.可能有些朋友见到代码就害怕。

告诉你，不怕！不懂脚本代码的我们可以使用 Dreamweaver 的插件，借尸还魂！实现全屏！65.首先我们到点击下载“MFX-ful lscreen.mxp”插件到自己的硬盘里，接着打开 Dreamweaver4 菜单栏“Commands”，选择“Manage Extensions”命令，打开插件管理工具“Macromedia Extension Manager”，按“Ctrl + i”快捷键把插件安装好。

66.接下来的事情就相当轻松了，重新启动一次 Dreamweaver4 ，按“Shift + F3”打开行为面板，再按快捷键“Ctrl + Tab”进入源代码窗口，点击行为面板的加号按钮，在弹出的菜单中选择“MFX”里的“MFX-f ullscreen”命令马上可以看到 < head > 和 < /head > 是加入了全屏的代码，同时 < body > 里也加入了“onLoad”加载函数。

按 F12 就可以看到全屏的效果。

注意，没有进入源代码窗口该命令呈灰色，是不可选的。

67.没有插件的朋友可以复制以下代码到网页文件：68.<script language="JavaScript">69.88.</script>89.</head>90.当然，<body> 里也加入了“onLoad”加载函数，代码如下：91.<body bgcolor="#FFFFFF" text="#000000" onLoad="MachakFull('full_window.htm','')" >92.看了前面的两种方法，分析源代码，我们注意到，都必须先打开一个原来的窗口，我们称之为A，然后再调出一个新的浏览器窗口，我们称之为B。

当 B 窗口打开时，就实现全屏了，并且位于最前面。

但前面的两种方法都没有把原来的窗口 A 窗口关闭。

我们可以在 < body > 里加入关闭的代码“onBlur="self.close"”或者“onBlur="javascript:window.closer()"”。

可是，此两种关闭都会弹出一个关闭的提示框。

无疑它影响了整个网页的显示效果！有办法解决么？当然有！请看下面的返璞归真法93.94.（6）返璞归真法95.96.此法是最完美的一种全屏方式，实现代码与相应简单，一个完整的全屏网页代码如下：97.<html>98.<head >99.<title>123</title>100.<meta http-equiv="Content-Type" content="text/html; charse t=gb2312" >101.<script >102.107.</script>108.</head>109.<body onload="omiga_window()" onblur="focus();closes.Click ();" scroll="no">110.<object id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">111.<param name="Command" value="Close" >112.</object>113.114.全屏！115.</body>116.</html>117.实现全屏的代码跟之前的两种方法相类似，差别就在于可以自动关闭原来的A窗口，并且不出现提示。