专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » 浏览器全屏:实现浏览器全屏窗口的几种方法 »正文

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

来源: 发布时间:星期四, 2009年2月12日 浏览:66次 评论:0


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

、瞒天过海法-javascript

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

可能有些朋友见到代码就害怕告诉你不怕!不懂脚本代码我们可以使用 Dreamweaver 插件借尸还魂!实现全屏!

首先我们到点击下载 “MFX-fullscreen.mxp”插件 到自己硬盘里接着打开 Dreamweaver4 菜单栏“Commands”选择“Manage Extensions”命令打开插件管理工具“Macromedia Extension Manager”按“Ctrl + i”快捷键把插件安装好
www.aspxuexi.com
接下来事情就相当轻松了重新启动次 Dreamweaver4 按“Sht + F3”打开行为面板再按快捷键“Ctrl + Tab”进入源代码窗口点击行为面板加号按钮在弹出菜单中选择“MFX”里“MFX-fullscreen”命令马上可以看到 < head > 和 < /head > 是加入了全屏代码同时 < body > 里也加入了“onLoad”加载按 F12 就可以看到全屏效果注意没有进入源代码窗口该命令呈灰色是不可选

没有插件朋友可以复制以下代码到网页文件:

< script language=\"JavaScript\" >
< !--
function MachakFull(Ie,other){
//Copyright ?1999 m.milicevic [email protected] [email protected]
x=screen.availWidth;
y=screen.availHeight;
target = parseFloat(navigator.appVersion.sub(navigator.appVersion.indexOf(\'.\')-1,navigator.appVersion.length));
((navigator.appVersion.indexOf(\"Mac\")!=-1) &&(navigator.userAgent.indexOf(\"MSIE\")!=-1) &&(parseInt(navigator.appVersion)4))
window.open(other,\"sub\",\'scrollbars=yes\');
(target >= 4){
(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);}
(navigator.appName\"Microsoft Internet Explorer\")
window.open(Ie,\"MachakFull\",\"fullscreen=yes\");
}
window.open(other,\"sub\",\'scrollbars=yes\');
}
//-- >
< /script >
< /head >

当然< body > 里也加入了“onLoad”加载代码如下:

< body bgcolor=\"#FFFFFF\" text=\"#000000\" _disibledevent=>
看了前面两种思路方法分析源代码我们注意到都必须先打开个原来窗口我们称的为A然后再调出个新浏览器窗口我们称的为B当 B 窗口打开时就实现全屏了并且位于最前面但前面两种思路方法都没有把原来窗口 A 窗口关闭我们可以在 < body > 里加入关闭代码“onBlur=\"self.close\"”或者“onBlur=\"javascript:window.closer\"”可是此两种关闭都会弹出个关闭提示框如下图:




无疑它影响了整个网页显示效果!有办法解决么?当然有!请看下面返璞归真法:

3、返璞归真法

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

< html >
< head >
< title >123< /title >
< meta http-equiv=\"Content-Type\" content=\"text/html; char=gb2312\" >
< script >
< !--
function omiga_window{
window.open(\"full_window.htm\",\"\",\"fullscreen,scrollbars\")
}
//-- >
< /script >
< /head >

< body _disibledevent=>< object id=closes type=\"application/x-oleobject\" id=\"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\"
id=\"clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11\" >
< param name=\"Command\" value=\"Close\" >


< /object >

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



0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: