技术资讯

IE7,IE8,IE6网页全屏显示,做触摸屏网站的几个问题

TIME:2012/5/25


前些天给单位做一个触摸屏上用的网站,过程中遇到IE7,IE8,IE6网页全屏显示,做触摸屏网站的几个问题 ,花了不少时间才解决,发现网络上对这几个问题的解决办法很凌乱,决定自己整理一下,希望能给遇到同样问题的朋友提供一些帮助。

主下面分别说明IE7,IE8,IE6网页全屏显示,做触摸屏网站的几个问题

(1)网页自动全屏显示。

(2)window.close()命令自动关闭网页时不出现提示关闭的对话框。

(3)在一段时间无操作后自动返回指定页面。

一、首先来解决网页自动全屏显示的问题。

网站做好了,要在触摸屏上显示,首先遇到的就是如何让网页自动全屏显示的问题目前网络上也有不少供触摸屏使用的浏览器,可以实现网页开机自动全屏运行,也可以定时返回首页,添加背景音乐等等功能,偷懒的朋友可以考虑一下,此处推荐一个Toucher浏览器。

不希望使用软件,而是自己动手,用代码来解决问题的朋友可以借鉴我的方法,如下:

新建一个网页作为引导页,网站由此引导页来进行全屏显示,首页全屏显示后,引导页随即自动关闭:

代码如下,写在引导页<body></body>之间。

==================================================================

<script>

window.opener=null; //解决关闭时是否提示的问题。

window.open('首页URL','my_win','fullscreen=yes, scrollbars=auto','_self','location=no');

//引导你的首页真正全屏显示,只有ALT+F4才能关闭。

window.open('','_self') //这行代码用来实现引导页自动关闭时不提示是否关闭用的。

window.close(); //引导页自动关闭。

</script>

==================================================================

当你做好这个引导页之后,也许你会发现IE7在运行你的网页时还是无法全屏显示,不用怀疑这段代码有问题。问题在于IE7本身的一些限制,要通过更改IE7的一些设置来解决。

需要设置的地方有以下两个:

第一个是:IE7的选项卡功能,在此功能开启时,你的网页在IE7下是无法实现真正的全屏显示的,具体表现情况不做描述,只写出如何取消选项卡功能。

打开Internet选项,常规面板下找到选项卡功能,

IE7网页全屏显示,做触摸屏网站的几个问题

打开设置面板,将启用前面的勾取消,即可关闭选项卡功能。

IE7网页全屏显示,做触摸屏网站的几个问题

通过设置,选项卡功能成功关闭。

第二个需要设置的地方,在Internet选项里的安全选项卡内进行更改,如图:

IE7网页全屏显示,做触摸屏网站的几个问题

在这里选择自定义级别,会看到多项安全设置:

IE7网页全屏显示,做触摸屏网站的几个问题

如上图,将“允许网站打开没有地址或状态栏的窗口”以及“允许有脚本初始化的窗口,不受大小和位置限制”两项设置修改改为启用,IE7默认是禁用的。

把这两处设置好之后,再打开你的引导页试试,此时可以实现真正的网页全屏显示了,这时候的网页只有通过ALT+F4才能关闭。

二、引导页自动关闭时不出现提示的问题[window.close()不提示]。

网络上对这个问题的解决办法多是标题为window.close()不提示,针对IE7的也有很多,但是个人认为没有说的很清楚,还是之前那段代码中的window.close()起作用,但是务必在之前多加一行

window.open('','_self') ,使引导页自动关闭而不出现提示起作用的就是这一句。

即如下所示:

==================================================================

<script>

window.opener=null; //解决关闭时是否提示的问题。

window.open('首页URL','my_win','fullscreen=yes, scrollbars=auto','_self','location=no');

//引导你的首页真正全屏显示,只有ALT+F4才能关闭。

window.open('','_self') //这行代码用来实现引导页自动关闭时不提示是否关闭用的。

window.close(); //引导页自动关闭。

</script>

==================================================================

三、在一段时间无操作(鼠标键盘无动作)后,自动返回指定页面的问题。

个人觉得比较不错的一段代码如下:

===============================================================================

<script>
var flag = true;
document.onmousemove = new Function("flag = false;");
function judgeMouse() {
if(flag) {
location.href = "引导页URL";
} else {
flag = true;
}
}
setInterval("judgeMouse()", 5000);//超时返回时间数(毫秒)
</script>

=================================================================================

将这段代码复制到网页中<head>部分,即可实现在一段时间无操作后自动返回某个指定页面的功能。

但前提是你的页面没有使用【框架结构】。

如果你的网站没有使用框架结构,相信你的几个问题至此已经基本解决,但是如果使用了框架结构,因为一个页面由多个框架页组成,所以用这个代码,估计这个超时返回的功能无法解决。

因为我的网站使用了框架结构,所以在解决这个问题时遇到了诸多麻烦,在框架结构内,这段代码无法判断鼠标无操作的时间。从代码的角度出发,试了多种方法,都没有能把这个问题解决。

既然通过代码没办法实现,就想到是否可以通过windows系统判断系统空闲的时间来解决,于是想到了任务计划,在系统中添加了一个在系统空闲五分钟后自动返回网站首页的任务计划,于是问题解决。也许这个办法还有局限,但目前为止来说,还没有发现什么毒副作用,并且也实现了在触摸屏没有操作之后五分钟自动返回网站首页的功能。希望能给遇到类似问题的你提供一些建议。

就先写到这里,在这次做触摸屏网站的过程中,遇到的几个自以为比较关键的问题应该也大致说清楚了,如果你也碰巧遇到了此类问题,但愿能够给你提供到一点点的帮助。其次作为一个十足的菜鸟,写到的这些肯定还有很多不足或者错误的地方,如果被高手偶然看到,欢迎指教,谢谢。

上一篇

今起个人可申请注册“.CN”和“.中国”域名

下一篇

移动互联网中最赚钱的模式