打开网页全屏显示关键字: js、javascript、打开网页全屏显示Js代码1.(1)打开全屏窗口2.方法如下:3.一:将下面的代码放在<HEAD>与</HEAD>之间4.<script language="JavaScript">5.<!--6.function call(htmlurl) {7.var8.newwin=window.open(htmlurl,"airWin","top=0,left=0,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,re sizable=yes,width=796,height=546");//修改宽度和高度可控制窗口的大小9.newwin.focus();10.return false;}//--></script>11.12.二:将下面的代码复制到〈BODY〉区并修改其中的链接地址和名称。
13.<a href=/horsewhite onclick='return call(this.href);'>全屏显示</a>14.15.(2)实现真正的全屏16.这种方法需按Alt+F4才能关闭。
17.代码如下:18.<html>19.<head>20.<meta http-equiv="Content-Type" content="text/html; charset=gb2312">21.<title>全屏显示</title>22.</head>23.<body background=#00ccff>24.<table border="1" width="100%">25.<tr>26.<td>27.<p align="center">28.<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, 'www_helpor_net', 'fu llscreen')">29.</td>30.</tr>31.</table>32.</body>33.</html>34.35.(3)效果同上36.将下面的代码贴到body之间,即可实现同上的效果,关闭的方法也同上。
37.<INPUT onclick="window.open(document.location, 'www_helpor_net', 'fullscreen')" type=button value=全屏显示 name=FullScreen>38.<SCRIPT language=JavaScript>39.<!--40.window.open("full_window.htm","新窗口","fullscreen=1");41.window.opener=null;42.window.close();43.//-->44.</SCRIPT>45.46.详解下列收集的代码:47.(4)瞒天过海法-javascript48.49.我们知道,显示器的分辩率大小决定了我们看到的程序窗口的面积大小,分辩率越大,窗口面积越大,看到的内容就越多。
但并不是说显示面积越大就越好,因为分辩率的变化会带来菜单文字的变化,可能会影响软件界面的字体美观。
此乃题外话,就不细说了。
浏览器同样是一种程序,其窗口的大小,我们可以利用脚本语言来控制调整,这样我们就可以实施瞒天过海法来达到全屏目的,方法是在网页文件的头部,也就是 < head > 与 < /head > 标签之间加上下面这段 javascript 代码:50.< script >51.< !--52.function omiga_window(){53.window.open("12.htm","","fullscreen=1,menubar=0,toolbar=0,directories=0,location=0,54.status=0,scrollbars=0")55.}56.//-- >57.< /script >58.代码功能是由一个网页调出另一个浏览器窗口,加上设置语句,设置新窗口的大小为全屏,然后新的网页内容就显示在此窗口里,借此实现了全屏。
59.不要忘记在网页文件的 < body > 标签里加上加载网页里调用函数的代码。
代码设置如下:60.<body onload="omiga_window()" onBlur="self.close()" scroll="no">61.62.(5)借尸还魂法63.64.可能有些朋友见到代码就害怕。
告诉你,不怕!不懂脚本代码的我们可以使用 Dreamweaver 的插件,借尸还魂!实现全屏!65.首先我们到点击下载“MFX-ful lscreen.mxp”插件到自己的硬盘里,接着打开 Dreamweaver4 菜单栏“Commands”,选择“Manage Extensions”命令,打开插件管理工具“Macromedia Extension Manager”,按“Ctrl + i”快捷键把插件安装好。
66.接下来的事情就相当轻松了,重新启动一次 Dreamweaver4 ,按“Shift + F3”打开行为面板,再按快捷键“Ctrl + Tab”进入源代码窗口,点击行为面板的加号按钮,在弹出的菜单中选择“MFX”里的“MFX-f ullscreen”命令马上可以看到 < head > 和 < /head > 是加入了全屏的代码,同时 < body > 里也加入了“onLoad”加载函数。
按 F12 就可以看到全屏的效果。
注意,没有进入源代码窗口该命令呈灰色,是不可选的。
67.没有插件的朋友可以复制以下代码到网页文件:68.<script language="JavaScript">69.<!--70.function MachakFull(Ie,other){71.//Copyright ?1999 icevic machakjoe@ jjooee@tip.nl72.x=screen.availWidth;73.y=screen.availHeight;74.target = parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf('.')-1,navigator.appVersion.length));75.if((navigator.appVersion.indexOf("Mac")!=-1) &&(erAgent.indexOf("MSIE")!=-1) &&(parseInt(navigator.appVersion)==4) )76.window.open(other,"sub",'scrollbars=yes');77.if (target >= 4){78.if (navigator.appName=="Netscape"){79.var MachakFull=window.open(other,"MachakFull",'scrollbars=yes','width='+x+',height='+y+',top=0,left=0');80.MachakFull.moveTo(0,0);81.MachakFull.resizeTo(x,y);}82.if (navigator.appName=="Microsoft Internet Explorer")83.window.open(Ie,"MachakFull","fullscreen=yes");84.}85.else window.open(other,"sub",'scrollbars=yes');86.}87.//-->88.</script>89.</head>90.当然,<body> 里也加入了“onLoad”加载函数,代码如下:91.<body bgcolor="#FFFFFF" text="#000000" onLoad="MachakFull('full_window.htm','')" >92.看了前面的两种方法,分析源代码,我们注意到,都必须先打开一个原来的窗口,我们称之为A,然后再调出一个新的浏览器窗口,我们称之为B。
当 B 窗口打开时,就实现全屏了,并且位于最前面。
但前面的两种方法都没有把原来的窗口 A 窗口关闭。
我们可以在 < body > 里加入关闭的代码“onBlur="self.close"”或者“onBlur="javascript:window.closer()"”。
可是,此两种关闭都会弹出一个关闭的提示框。
无疑它影响了整个网页的显示效果!有办法解决么?当然有!请看下面的返璞归真法93.94.(6)返璞归真法95.96.此法是最完美的一种全屏方式,实现代码与相应简单,一个完整的全屏网页代码如下:97.<html>98.<head >99.<title>123</title>100.<meta http-equiv="Content-Type" content="text/html; charse t=gb2312" >101.<script >102.<!--103.function omiga_window(){104.window.open("full_window.htm","","fullscreen,scrollbars")105.}106.//-->107.</script>108.</head>109.<body onload="omiga_window()" onblur="focus();closes.Click ();" scroll="no">110.<object id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">111.<param name="Command" value="Close" >112.</object>113.114.全屏!115.</body>116.</html>117.实现全屏的代码跟之前的两种方法相类似,差别就在于可以自动关闭原来的A窗口,并且不出现提示。