注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

打开网页全屏显示  

2016-10-24 14:35:40|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
打开网页全屏显示
2010-06-09 11:19
  1. (1)打开全屏窗口   
  2. 方法如下:   
  3. 一:将下面的代码放在<HEAD>与</HEAD>之间   
  4. <script language="JavaScript">   
  5. <!--   
  6. function call(htmlurl) {   
  7. var   
  8. newwin=window.open(htmlurl,"airWin","top=0,left=0,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=796,height=546");//修改宽度和高度可控制窗口的大小   
  9. newwin.focus();   
  10. return false;}//--></script>   
  11.   
  12. 二:将下面的代码复制到〈BODY〉区并修改其中的链接地址和名称。   
  13. <a href=http://hi.baidu.com/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', 'fullscreen')">   
  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)瞒天过海法-javascript   
  48.   
  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-fullscreen.mxp”插件 到自己的硬盘里,接着打开 Dreamweaver4 菜单栏“Commands”,选择“Manage Extensions”命令,打开插件管理工具“Macromedia Extension Manager”,按“Ctrl + i”快捷键把插件安装好。   
  66. 接下来的事情就相当轻松了,重新启动一次 Dreamweaver4 ,按“Shift + F3”打开行为面板,再按快捷键“Ctrl + Tab”进入源代码窗口,点击行为面板的加号按钮,在弹出的菜单中选择“MFX”里的“MFX-fullscreen”命令马上可以看到 < head > 和 < /head > 是加入了全屏的代码,同时 < body > 里也加入了“onLoad”加载函数。按 F12 就可以看到全屏的效果。注意,没有进入源代码窗口该命令呈灰色,是不可选的。   
  67. 没有插件的朋友可以复制以下代码到网页文件:   
  68. <script language="JavaScript">   
  69. <!--   
  70. function MachakFull(Ie,other){   
  71. //Copyright ?1999 m.milicevic machakjoe@netscape.net jjooee@tip.nl   
  72. 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) &&(navigator.userAgent.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; charset=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窗口,并且不出现提示。不出现提示的奥妙在于 < body > 标签里的:   
  118. onblur="focus();closes.Click();"  
  119. 以及< body >和< /body >之间的:   
  120. <object id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">   
  121. <param name="Command" value="Close">   
  122. </object>   
  123. 要实现返璞归真完美全屏方式,不要漏了上面两段代码哟!

 

欢迎转载,转载请注明出处:http://www.cnblogs.com/Tonyyang/

  评论这张
 
阅读(68)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018