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

 更新时间:2013年11月11日 16:35:33   作者:   我要评论

这篇文章介绍了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=utf-8" 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=utf-8" 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>

相关文章

  • Javascript实现禁止输入中文或英文的例子

    Javascript实现禁止输入中文或英文的例子

    这篇文章主要介绍了Javascript实现禁止输入中文或英文的方法实例,本文方法都是使用正则表达式实现,需要的朋友可以参考下
    2014-12-12
  • JavaScript动态提示输入框输入字数的方法

    JavaScript动态提示输入框输入字数的方法

    这篇文章主要介绍了JavaScript动态提示输入框输入字数的方法,实例分析了javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 9个JavaScript评级/投票插件

    9个JavaScript评级/投票插件

    在访问某个网站或者博客时,如果该站点为用户提供内容的评级或投票功能的话,可以增强用户参与的交互性之外,更可以给用户一种“主人”的亲切感,使得用户可以切实地参与到网站内容的评价体系中来。
    2010-01-01
  • 浅谈Webpack打包优化技巧

    浅谈Webpack打包优化技巧

    这篇文章主要介绍了浅谈Webpack打包优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 原生js实现图片轮播特效

    原生js实现图片轮播特效

    这篇文章主要介绍了原生js实现图片轮播特效,适合用于商品展示,实现最简单的轮播效果,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • js处理表格对table进行修饰

    js处理表格对table进行修饰

    这篇文章主要介绍了js处理表格对table进行修饰的一些小技巧,需要的朋友可以参考下
    2014-05-05
  • js验证表单大全

    js验证表单大全

    js验证表单大全...
    2006-11-11
  • javascript各种复制代码收集

    javascript各种复制代码收集

    javascript各种形式的复制代码效果,有直接复制url,复制文本框中的内容、隐藏表单中的内容,复制span中的内容
    2008-09-09
  • js实现精确到秒的倒计时效果

    js实现精确到秒的倒计时效果

    这篇文章主要为大家详细介绍了js实现精确到秒的倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • js定时调用方法成功后并停止调用示例

    js定时调用方法成功后并停止调用示例

    这篇文章主要介绍了js定时调用方法成功后并停止调用的实现,需要的朋友可以参考下
    2014-04-04

最新评论