紫索科技

品牌/营销网站建设
..
138 7915 5282
只做有价值的网站
点击获取方案

实现浏览器全屏窗口的几种方法心得技巧教程

IE 浏览器隐身大法

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

一、瞒天过海法-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 onload="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 onload="omiga_window()" onblur="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 > 标签里的:

onblur="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 >

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

  点击 下载源代码及测试页面


原文地址:http://www.zisuo.com/news/实现浏览器全屏窗口的几种方法心得技巧教程926.htm
文章整理:紫索科技--专业提供南昌网站建设九江网站制作服务

以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息。
资讯分类:
紫索动态 建站观点 网络营销 网页制作 网站设计
相关文章
An error occurred on the server when processing the URL. Please contact the system administrator.

If you are the system administrator please click here to find out more about this error.