让B/S构造的程序也全屏运行 _Web前端

让B/S结构的程序也全屏运行

之前做一个触摸屏应用系统要让HTML页全屏显示。

现在把这段主要的代码分享给大家。

触摸屏系统全屏程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全屏显示网页</title>
</head>

<body>

 <div id="popupWindow" style=" display:none;" >
   <table width="60%" style="top:20%; position:absolute; right:20%;border-collapse:collapse;">
     <tr>
      <td colspan="6" align="right">
      <input type="button" onclick="parent.upd();" value=" 事 件 " />
      系统界面风格一 可选色</td>
      </tr>
    <tr>
      <td class="color_A"></td>
      <td class="color_B"></td>
      <td class="color_F"></td>
      <td class="color_D"></td>
      <td class="color_E"></td>
      <td class="color_C"></td>
    </tr>
    <tr>
      <td>#E3F1FB</td>
      <td>#C1DBFC</td>
      <td>#ACD0EE</td>
      <td>#EFEFEF</td>
      <td>#F7F7F7</td>
      <td id="Test_A">#273F7B</td>
    </tr>
  </table>
  
  
 </div>
 
<script type="text/javascript">
//获取全屏中的对象
function $(id) {
	return oPopup.document.getElementById(id);
}
//创建一个弹出窗口	
var createPopupWindow=function(){
	oPopup = window.createPopup();
	oPopup.document.createStyleSheet().addImport("c.css");
	   	
	var opBody=oPopup.document.body;
	opBody.innerHTML =popupWindow.innerHTML;	
}
createPopupWindow();
	

//全屏显示弹出窗口
var showPopup=function(){
	if(oPopup.isOpen)return;
	var w=screen.width,h=screen.height;//w=1024 h=768
	var x=0,y=0;
	oPopup.show(x,y,w,h);
}

document.createStyleSheet().addImport("c.css");//导入样式
setInterval(showPopup,50000);//每50秒检查全屏页是否显示
window.onfocus=function(){showPopup();}
window.onblur=function(){showPopup();}
window.onblur();
/**以下为全屏页面的函数  ****/
var upd=function(){
		$("Test_A").innerHTML+="执行函数,";
}
</script>
</body>
</html>

?c.css

@charset "utf-8";
/* CSS Document */
*{font-size:12px; color:#D49FFF; }
body{background-color:#FFF}

.color_A{background-color:#E3F1FB;height:25px; }
.color_B{background-color:#C1DBFC}
.color_C{background-color:#273F7B}
.color_D{background-color:#EFEFEF}
.color_E{background-color:#F7F7F7}
.color_F{background-color:#ACD0EE}

4 楼 neo 2010-01-20

在firefox中无效，是不是只支持IE? 支持IE版本多少？

5 楼 liaofeng_xiao 2010-01-20

看了一下，想知道怎样获得oPopup的event？
var oPopup =window.createPopup();
var oEvent=oPopup.event || ......知道帮忙通知一下

6 楼 liaofeng_xiao 2010-01-20

whaosoft 写道

这个东西运行以后就切换不出去了是不是lz就要这种效果呢?

要做也不难，弹出窗口有个hide（）方法，来个onkeydown事件什么的就ok

7 楼 jaxchow 2010-01-20

呃 only IE? 用过AIR套html过,全屏很不错

8 楼 zhonggeneral 2010-01-20

想法不错，效果一般，要退出来还得按组合键。。

9 楼 dsna 2010-01-20

jaxchow 写道

呃 only IE? 用过AIR套html过,全屏很不错

这个createPopupWindow(); 只支特IE ；
一般的网站是不会有这种需求的，主要用在自助终端上安装IE就可以了，所以兼容性就没考虑了。

10 楼 dsna 2010-01-20

<div class="quote_title">zhonggeneral 写道</div>
<div class="quote_div">想法不错，效果一般，要退出来还得按组合键。。</div>
<p><br>代码中退出功能没有实现，添加个关闭方法就行了。</p>
<pre name="code" class="html"><input type="button" onclick="parent.hide();" value=" 关闭 " /></pre>
<p>?</p>
<pre name="code" class="js">/**以下为全屏页面的函数 ****/
var upd=function(){
$("Test_A").innerHTML+="执行函数,";
}

var hide=function(){
oPopup.hide();
}
</pre>
<p>??</p>

11 楼 neo 2010-01-20

不错的，通常触摸屏这种特殊终端，不会对浏览器做过多要求，确定一种能用即可
到是对lz做出的触摸屏效果感兴趣，有界面截图吗？

12 楼 ahuango 2010-01-20

既然贴了代码，希望楼主能够弄得清楚一点。看起来好乱

13 楼 aninfeel 2010-01-20

wxq594808632 写道

好吧..我不是ie..

14 楼 brumby007 2010-01-20

直接用KIOSK模式进IE不就行了？
即使是FIREFOX也有RKIOSK插件。
不用自己写代码噻

15 楼 neo 2010-01-20

brumby007 写道

直接用KIOSK模式进IE不就行了？
即使是FIREFOX也有RKIOSK插件。
不用自己写代码噻

好办法

16 楼 Ihavegotyou 2010-01-21

如果browser挂了，没有响应。怎么处理?

17 楼 Ihavegotyou 2010-01-21

如果browser挂了，没有了响应。怎么处理？

18 楼 dsna 2010-01-21

neo 写道

不错的，通常触摸屏这种特殊终端，不会对浏览器做过多要求，确定一种能用即可
到是对lz做出的触摸屏效果感兴趣，有界面截图吗？

帖个触摸屏效果图

19 楼 liuyu220 2010-01-21

SmallFish 写道

52019446（技术讨论）此群美女云集，欢迎有识之士加入.

看你头像我就不信

20 楼 flyingcai 2010-01-21

按F11，不就全屏了吗？

21 楼 minzaipiao 2010-01-21

firefox上不行

22 楼 cuixiping 2010-01-22

用vb写一个全屏的exe，里面放个WebBrowser控件就可以了。
firefox的怎么搞还不知道。

23 楼 yose 2010-01-22

晕哦~~~怎么退出呀~