实现浏览器全屏窗口的几种方法

浏览网页，时常会发现自己的浏览器窗口不见了，但网页内容还在。这种效果是不是很神奇呢？实现此种功能只要有三种原理，按实现方法的不同，给它们各起了个名字，分别是：瞒天过海法、借尸还魂法和返璞归真法。不要被它们的名字吓着了，其实实现起来并不困难，只要看了下面的内容，就明白个中道理了！

一、瞒天过海法-javascript

我们知道，显示器的分辩率大小决定了我们看到的程序窗口的面积大小，分辩率越大，窗口面积越大，看到的内容就越多。但并不是说显示面积越大就越好，因为分辩率的变化会带来菜单文字的变化，可能会影响软件界面的字体美观。此乃题外话，就不细说了。浏览器同样是一种程序，其窗口的大小，我们可以利用脚本语言来控制调整，这样我们就可以实施瞒天过海法来达到全屏目的，方法是在网页文件的头部，也就是 < head > 与 < /head > 标签之间加上下面这段 javascript 代码：

< script >
< !--
function omiga_window(){
window.open("12.htm","","fullscreen=1,menubar=0,toolbar=0,directories=0,location=0,
status=0,scrollbars=0")
}
//-- >
< /script >

代码功能是由一个网页调出另一个浏览器窗口，加上设置语句，设置新窗口的大小为全屏，然后新的网页内容就显示在此窗口里，借此实现了全屏。

不要忘记在网页文件的 < body > 标签里加上加载网页里调用函数的代码。代码设置如下：

< body οnlοad="omiga_window()" onBlur="self.close()" scroll="no" >

二、借尸还魂法

可能有些朋友见到代码就害怕。告诉你，不怕！不懂脚本代码的我们可以使用 Dreamweaver 的插件，借尸还魂！实现全屏！

首先我们到点击下载 “MFX-fullscreen.mxp”插件到自己的硬盘里，接着打开 Dreamweaver4 菜单栏“Commands”，选择“Manage Extensions”命令，打开插件管理工具“Macromedia Extension Manager”，按“Ctrl + i”快捷键把插件安装好。

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

没有插件的朋友可以复制以下代码到网页文件：

< script language="JavaScript" >
< !--
function MachakFull(Ie,other){
//Copyright ?1999 m.milicevic machakjoe@netscape.net jjooee@tip.nl
x=screen.availWidth;
y=screen.availHeight;
target = parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf('.')-1,navigator.appVersion.length));
if((navigator.appVersion.indexOf("Mac")!=-1) &&(navigator.userAgent.indexOf("MSIE")!=-1) &&(parseInt(navigator.appVersion)==4))
window.open(other,"sub",'scrollbars=yes');
if (target >= 4){
if (navigator.appName=="Netscape"){
var MachakFull=window.open(other,"MachakFull",'scrollbars=yes','width='+x+',height='+y+',top=0,left=0');
MachakFull.moveTo(0,0);
MachakFull.resizeTo(x,y);}
if (navigator.appName=="Microsoft Internet Explorer")
window.open(Ie,"MachakFull","fullscreen=yes");
}
else window.open(other,"sub",'scrollbars=yes');
}
//-- >
< /script >
< /head >

当然，< body > 里也加入了“onLoad”加载函数，代码如下：

< body bgcolor="#FFFFFF" text="#000000" onLoad="MachakFull('full_window.htm','')" >

看了前面的两种方法，分析源代码，我们注意到，都必须先打开一个原来的窗口，我们称之为A，然后再调出一个新的浏览器窗口，我们称之为B。当 B 窗口打开时，就实现全屏了，并且位于最前面。但前面的两种方法都没有把原来的窗口 A 窗口关闭。我们可以在 < body > 里加入关闭的代码“onBlur="self.close"”或者“onBlur="javascript:window.closer()"”。可是，此两种关闭都会弹出一个关闭的提示框，如下图：

无疑它影响了整个网页的显示效果！有办法解决么？当然有！请看下面的返璞归真法：

三、返璞归真法

此法是最完美的一种全屏方式，实现代码与相应简单，一个完整的全屏网页代码如下：

< html >
< head >
< title >123< /title >
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
< script >
< !--
function omiga_window(){
window.open("full_window.htm","","fullscreen,scrollbars")
}
//-- >
< /script >
< /head >

< body οnlοad="omiga_window()" οnblur="focus();closes.Click();" scroll="no" >
< object id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" >
< param name="Command" value="Close" >
< /object >
< p > < /p >
< p > < /p >

全屏！

< /body >
< /html >

实现全屏的代码跟之前的两种方法相类似，差别就在于可以自动关闭原来的A窗口，并且不出现提示。不出现提示的奥妙在于 < body > 标签里的：

οnblur="focus();closes.Click();"

以及< body >和< /body >之间的：

< object id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" >
< param name="Command" value="Close" >
< /object >

要实现返璞归真完美全屏方式，不要漏了上面两段代码哟！

实现浏览器全屏窗口的几种方法相关推荐

MFC中主副屏窗口全屏最大化的几种方法
MFC中主副屏窗口全屏最大化的几种方法 1.根据鼠标位置判断全屏位置枚举所有窗口 CArray<MONITORINFO, MONITORINFO&> g_arrMonitorIn ...
android webview 横竖屏_WebView实现全屏播放的一种方法
用过WebView的开发者们肯定都知道这里面的坑数不胜数,加载缓慢,内存泄露,文件选择......没错,全屏播放视频,这又是一个大坑.一个没有修饰过的原生WebView几乎不可能在某一个主流视频网站实 ...
将网页全屏显示的三种方法
1.最简单,最直接的方法,使用window.open()函数 var url = "http://www.baidu.com" ; window.open(url,'_blank' ...
excel2016html,Excel2016中切换至全屏视图的两种方法
在Excel工作表的使用过程中,有时因为工作表中的内容较多,无法在当前屏幕中完整显示,这时切换到全屏视图来查看要更方便一些.在Excel 2016中切换至全屏视图,主要有以下两种方法: 方法一:使用快 ...
uni-app 轮播图视频+图片视频图片全屏预览两种方法
项目场景: 在做商城项目的时候,商品详情的轮播图需要同时显示视频和图片,并且能够全局预览解决方案: 如果项目里有uview这个组件库,可以通过swiper轮播图的指定类型进行解决,点击这里进行跳转 ...
android 强制全屏,[Android]设置Activity为全屏显示的两种方法
1. 方法1:AndroidManifest.xml 里,Activity的 android:theme 指定为" @android :style/Theme.NoTitleBar.Ful ...
背景图片全屏适应的两种方法，background-size: cover；或者（background-size: 100% 100%；）
background: #000 url(img1.jpg) no-repeat fixed center center;background-size: cover; 或者(background-s ...
关于全屏显示，浏览器全屏、窗口/页面全屏
1.浏览器全屏 (1)全屏显示 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm. ...
python+selenium web浏览器全屏长截图的两种方式
1.此方法只适用于能够无头方式运行的浏览器,比如:chrome def get_image(url,pic_name):# chromedriver的路径chromedriver = r"D ...

实现浏览器全屏窗口的几种方法

实现浏览器全屏窗口的几种方法相关推荐

最新文章

热门文章