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>

第三种：
        其实就是以上两种的叠加，一般这种情况也用的比较多。就是直接打开一个网页的时候，就进入它的全屏模式，这种情况就和第一种不同了，因为第一种，当你点击了“全屏显示”按钮后，它是新打开一个全屏的网页，但是原来普通的那个网页仍然有，所以，这个就比较好一些。方法为：建立两个jsp文件，第一个里只运行如下代码，比如名字叫demo.jsp；第二个则是你实际要运行的内容，比如叫：temp.jsp：

demo.jsp:


代码如下:

<body   onload="window.open('temp.jsp','_blank','fullscreen=1');opener=null;window.close()">

</body>

temp.jsp:


代码如下:

<%@ page contentType="text/html;charset=GB2312" language="java" %>
<html>
<body>
这里就是我的全屏内容，再看看原来我们在地址栏里输入的demo.jsp，是不是关闭了？OK，搞定！
</body>
</html>

退出全屏
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

对于退出全屏，我上网也搜过很多资料，总体来说，都很难达到我们期望的目标，比如：我们可以加一个超链接 <a href="" target="_blank">在新窗口打开；也可以应用上面打开全屏的方法的逆方法来做。但是，无论怎么搞，最后从全屏往普通模式切换的时候，总是相当于重新打开一个窗口，这样，加入我们原来的全屏模式正在放电影，你如果切换一下成普通模式，就得重新加载，这肯定不行。但是，没办法，我现在就参看这篇帖子里的5楼的回复：http://topic.csdn.net/t/20021028/12/1130882.html，就这个方法，大致上还过的去，只不过，它这个方法不叫全屏，相当于是把窗口向上平移了一定得高度，我们仍然可以拖动窗口。代码如下：


代码如下:

<%@ page contentType="text/html;charset=GB2312" language="java" %>
<script   language="JScript">
       var   o=1;
function   goResize()
{
      var   d=document.body,e=event,m=event.srcElement;o?
   new   function(){moveBy(e.clientX-e.screenX,e.clientY- e.screenY);resizeBy(screen.availWidth-d.offsetWidth,screen.availHeight- d.offsetHeight);m.value="取消";o=0}:
    new   function(){moveTo(0,0);resizeTo(screen.availWidth,screen.availHeight);m.value="全屏";o=1}
 }
</script>
<input   type="button"   value="全屏"   onclick="goResize()">

关闭页面
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

如果要关闭页面，那么只需要在页面中加上这么一个超链接即可：


代码如下:

<a href="javascript:self.close()" >关闭窗口</a>

赞 (0)

相关推荐

  • 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    先给大家展示效果图如下所示: 使用方法: 首先在head区引入jquery.js,jquery-ui.js,fullPage.js以及样式文件jquery.fullPage.css <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="

  • 利用浏览器全屏api实现js全屏

    复制代码 代码如下: (function () { var fullScreenApi = {  supportsFullScreen : false,  isFullScreen : function () {   return false;  },  requestFullScreen : function () {},  cancelFullScreen : function () {},  fullScreenEventName : '',  prefix : '' }, browser

  • 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品. 为谁而用 让移动站点的相册体验和原生App一样的设计师和开发者. 绝佳特性 PhotoSwipe提供给用户一个熟悉又直观的相册交互界面. 官方网站 http://www.photoswipe.com/ 源码示例 http://github.com/downloads/codecomputerlove/P

  • fullpage.js全屏滚动插件使用实例

    fullpage.js全屏滚动插件使用实例

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件,很多网站现在都使用了其来实现较好的浏览体验.  可以实现的功能: •支持前进后退和键盘控制  •多个回调函数  •支持手机.平板触摸事件  •支持 CSS3 动画  •支持窗口缩放  •窗口缩放时自动调整  •可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 二.插件下载 np

  • jQuery实现带滚动导航效果的全屏滚动相册实例

    jQuery实现带滚动导航效果的全屏滚动相册实例

    本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')

  • 用html5 js实现点击一个按钮达到浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen()

  • jquery实现全屏滚动

    在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1.js动态获取屏幕的高度. 获取屏幕的高度,设置每一屏幕的高度. 2.监听mousewheel事件. 监听mousewheel事件,并判断滚轮的方向,向上或向下滚动一屏. 二.jQuery插件fullpages介绍 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平

  • 基于jquery实现全屏滚动效果

    基于jquery实现全屏滚动效果

    那么今天就来介绍这款fullPage,与fullPage.js是不同的,fullpage兼容性更佳,能向下兼容到IE6, 不依赖任何 js 库,可独立使用.功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放.旋转以产生各种各样的动画效果.同时它还支持 fullPage.js 所没有的水平滚动. 兼容桌面端(ie5.5+) 和 手机端 你可以用它来构建你的个人主页或者网页应用 这是一个不使用jQuery小巧的框架 不到9KB 再介绍之前先看一

  • jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

    jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

    经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度.easing:动画效果.navigation:false是否出现导航,还支持事件Callback函数调用,onLeave.afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12.以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用. 使用方法

  • Fullpage.js固定导航栏-实现定位导航栏

    Fullpage.js固定导航栏-实现定位导航栏

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工

随机推荐