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

方法一:

我们知道,显示器的分辩率大小决定了我们看到的程序窗口的面积大小,分辩率越大,窗口面积越大,看到的内容就越多。但并不是说显示面积越大就越好,因为分辩率的变化会带来菜单文字的变化,可能会影响软件界面的字体美观。此乃题外话,就不细说了。浏览器同样是一种程序,其窗口的大小,我们可以利用脚本语言来控制调整,这样我们就可以实施瞒天过海法来达到全屏目的,方法是在网页文件的头部,也就是 <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()"”。

以下能够完成差不多得效果

<script language="javaScript">
function intro()
{
 if ((navigator.appVersion.indexOf("Mac")!=-1) &&(navigator.userAgent.indexOf("MSIE")!=-1) &&(parseInt(navigator.appVersion)=4))
 {
  skip();
 }
 else
 {  
  popup();
 }
}
function skip()

 location.href="http://localhost/Demo/draw/draw.htm";
}
function popup()

 version =parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf('.')-1,navigator.appVersion.length));
 if (version >=4)
  version = parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf('.')-1,navigator.appVersion.length));
 if (version >= 4)    
 {
  if (navigator.appName=="Netscape")
  {  
       Hello = window.open("http://localhost/Demo/draw/draw.htm","Hello","scrollbars");
       Hello.focus();     
  }

  if (navigator.appName=="Microsoft Internet Explorer")
  { 
       window.open("http://localhost/Demo/draw/draw.htm","screen","fullscreen==yes");
  }
 }
 else
 { 
      location.href="http://localhost/Demo/draw/draw.htm";
 }
}
</script>
<BODY οnlοad="init()">

方法三:

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

<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>

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值