打開網頁全屏顯示

時間  2019-11-09
標籤 打開 網頁 全屏 顯示 欄目 HTML 简体版
原文   原文鏈接

http://www.2ey.cn/showart.asp?art_id=616 javascript

（1）打開全屏窗口
方法以下：
一：將下面的代碼放在<HEAD>與</HEAD>之間
<script language="JavaScript">
<!--
function call(htmlurl) {
var
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");//修改寬度和高度可控制窗口的大小
newwin.focus();
return false;}//--></script>

二：將下面的代碼複製到〈BODY〉區並修改其中的連接地址和名稱。
<a href=http://hi.baidu.com/horsewhite onclick='return call(this.href);'>全屏顯示</a>

（2）實現真正的全屏
這種方法需按Alt+F4才能關閉。
代碼以下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全屏顯示</title>
</head>
<body background=#00ccff>
<table border="1" width="100%">
<tr>
<td>
<p align="center">
<input type="BUTTON" name="FullScreen" value="全屏顯示" onClick="window.open(document.location, 'www_helpor_net', 'fullscreen')">
</td>
</tr>
</table>
</body>
</html>

（3）效果同上
將下面的代碼貼到body之間，便可實現同上的效果，關閉的方法也同上。
<INPUT onclick="window.open(document.location, 'www_helpor_net', 'fullscreen')" type=button value=全屏顯示 name=FullScreen>
<SCRIPT language=JavaScript>
<!--
window.open("full_window.htm","新窗口","fullscreen=1");
window.opener=null;
window.close();
//-->
</SCRIPT>

詳解下列收集的代碼：
（4）瞞天過海法-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">

（5）借屍還魂法

可能有些朋友見到代碼就懼怕。告訴你，不怕！不懂腳本代碼的咱們可使用 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()"」。但是，此兩種關閉都會彈出一個關閉的提示框。無疑它影響了整個網頁的顯示效果！有辦法解決麼？固然有！請看下面的返璞歸真法

（6）返璞歸真法

此法是最完美的一種全屏方式，實現代碼與相應簡單，一個完整的全屏網頁代碼以下：
<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>

全屏！
</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>
要實現返璞歸真完美全屏方式，不要漏了上面兩段代碼喲！
html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程