1、window.open方式
第一种:
在已经打开的一个普通网页上,点击“全屏显示”,然后进入该网页对应的全屏模式。方法为:在网页的<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>
2、模拟F11功能(不支持多浏览器)方式
<SCRIPT LANGUAGE="JavaScript"> <!-- function fullscreen(){ //在ie下可行 var wsh = new ActiveXObject("WScript.Shell"); wsh.sendKeys("{F11}"); } //--> </SCRIPT>
分享到:
相关推荐
### JS实现全屏显示 #### 知识点一:全屏API的基本概念 在Web开发中,有时我们需要让页面进入全屏模式以提供更好的用户体验或适应特定的应用场景(如视频播放、游戏等)。HTML5引入了一组标准API来支持全屏功能。...
js 实现 全屏广告! 值得下载看看!资源免费,大家分享!!
简单易懂js 实现全屏飘...js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个js 实现全屏飘雪花 两个
在本教程中,我们将探讨如何使用原生JavaScript实现全屏滚动,无需依赖任何外部插件。 首先,我们需要创建一个HTML结构,包含多个全屏容器,每个容器代表一屏内容。例如: ```html <div class="section">Section...
基于 JavaScript 实现全屏漂移广告 标题解释 本文实例分享了基于 JavaScript 实现全屏漂移广告的方法,通过使用 JavaScript 语言来实现广告的全屏漂移效果。 描述解释 本文档主要介绍了使用 JavaScript 实现全屏...
在介绍如何用JavaScript实现全屏预览功能之前,我们首先需要了解浏览器提供的全屏API。全屏API允许网页内容以全屏模式显示,这样可以提供更加沉浸式的用户体验,全屏显示内容覆盖浏览器界面的所有其他内容。 ### ...
在iPhone的Safari浏览器中实现全屏浏览可以让用户在查看网页内容时获得更沉浸式的体验。通常,Safari浏览器在浏览网页时会显示顶部的工具栏和底部的标签页栏,这占据了屏幕的一部分空间。全屏浏览则可以隐藏这些元素...
JavaScript 实现全屏页面滚动效果是一项常见的网页交互技术,它能提供流畅的视觉体验和吸引用户的注意力。在本文中,我们将深入探讨如何使用 JavaScript 来创建这种效果。 首先,全屏页面滚动通常涉及到改变页面...
这个压缩包"基于anime.js实现全屏响应式图片视差旋转切换特效源码.zip"包含了一个利用anime.js库来创建全屏响应式图片视差旋转切换特效的源代码。下面我们将详细探讨anime.js以及如何实现这样的特效。 首先,让我们...
资源介绍:HTML+ CSS+JS 实现全屏图片平铺+Lightbox效果,可查看前后(不依赖外部库) 资源特点:代码短小、代码容易阅读、重点注释、方便扩展、样式美观、采用CSS+JS实现。 适用人群:前端从业职,新手小白,有网站...
本文将详细介绍如何使用JavaScript实现这一功能,同时结合jQuery库来简化操作。 首先,我们要理解浏览器的全屏API。在现代浏览器中,`Fullscreen API` 提供了进入和退出全屏模式的能力。这个API主要包含以下三个...
在JavaScript中实现全屏飘动效果,主要是通过CSS和JavaScript的结合来完成的。这个效果通常用于网页的广告展示或者动态背景,可以吸引用户的注意力,提升用户体验。下面将详细讲解如何实现这一效果。 首先,我们...
JS全屏漂浮广告</title><style type=”text/css”>div#roll{width:100px;height:100px; background-color:#000; color:#fff; position:absolute;}</style></head> <body><div><div>...
本篇文章将深入探讨如何利用JavaScript实现全屏操作,并解决在过程中可能遇到的问题。 首先,我们需要了解浏览器提供的全屏API。在HTML5中,`Fullscreen API`被引入,允许网页元素进入或退出全屏模式。主要涉及到的...
下面是一种使用JavaScript实现全屏显示的方法: ```javascript function requestFullScreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element....
❤爱情墙❤html5+css3+js 实现全屏七夕表白页面 (可自定义文字) 博客地址:https://blog.csdn.net/qq316148300/article/details/111954088
在本文中,我们将深入探讨如何使用JavaScript实现这样的效果,并分析提供的代码示例。 首先,我们要明白JavaScript是一种解释型的脚本语言,它主要用于增强网页的动态功能。DOM(Document Object Model)是HTML和...
"js实现浏览器全屏兼容谷歌火狐等"这个主题就涉及到如何使用JavaScript来实现在不同浏览器上实现全屏功能,并确保与主流浏览器如Google Chrome和Mozilla Firefox等的兼容性。这里我们将详细讲解这一技术实现的原理和...
通过以上介绍,我们可以看出使用JavaScript实现全屏显示功能并不复杂,但是为了确保跨浏览器的兼容性和良好的用户体验,开发者需要关注细节并进行适当的调整。此外,随着Web技术的发展,未来全屏API的标准将会更加...