无边框窗口代码详解

程序员文章站 2024-02-25 19:56:09

/*代码思路此代码会以fullscreen方式打开一个空白窗口，然后用window.resize改变其大小。最后在以写入onload="location.re...

/*代码思路
此代码会以fullscreen方式打开一个空白窗口，然后用window.resize改变其大小。
最后在以写入onload="location.replace='url'"的办法将网址改变。
打开的窗口会是一个带有frame的窗口，其中窗口顶端会有一个高22的框架网页。
此网页是用来操纵窗口移动及关闭。
*/

/*说明
代码分两个部分，但总共牵涉到5个html文件及4个图像文件
第一部分是用来打开窗口，放在哪个文件都无所谓。
第二部分是用来控制窗口的移动及关闭，必须放在指定的文件里。
在此代码里，5个html文件分别为：
1.html; 代码第一部分所在
load.html; 所打开的窗口，是一个框架网页
chromelesstit.html；代码第2部分所在
contacting.html；用来显示如'page loading.."等临时信息的网页
main.html；真正的主网页
4个图像分别为
x_a.gif; active
x_d.gif; mousedown
x_o.gif; mouseover
以上三个文件分别代表关闭窗口图标的不同状态
none.gif; 用来遮盖chromelesstit.html
*/

/*使用方法
如果你想让一个文件,如1.html,中的某一个连接打开一个指像main.html的无边框窗口。
把代码第一部分放到该文件中。
然后将连接
<a herf="main.html">
改为
<a herf="#" onclick="doopen()">
在该文件所在目录内
1.建立
chromelesstit.html;
contacting.html;
load.html;
等三个文件，其html代码见本文所附。（不要做任何修改）
2.建立
一个名为images的目录（注意大小写，与有则不用），将
http//lain.oso.com.cn/x_a.gif;
http//lain.oso.com.cn/x_d.gif;
http//lain.oso.com.cn/x_o.gif;
http//lain.oso.com.cn/none.gif;
这4个文件拷入改目录.
对于初学者，以上则足够了。如果想要更好的效果，自己改代码。
*/


chromelesstit.html 文件代码

<html><head>
<meta http-equiv=content-type content=text/html;charset=windows-1252>
<style type=text/css>
#mywindowtitle { position: absolute; left: 0px; top: 0px; width: 100%; height: 22px; z-index: 1; background-color: #ffffff; clip:rect(0,100%,22,0); }
#mywindow { position: absolute; left: 0px; top: 0px; width: 100%; height: 22px; z-index: 2; clip:rect(0,100%;22,0); }
#mywindowclose { position: absolute; left: -22px; top: -22px; width: 11px; height: 11px; z-index: 3; clip:rect(0,11,11,0); }
</style>
<script language=javascript type=text/javascript>
// chromeless window v1.1 (title)
//////////////////////////////////////////////////////////////// title bar control //////

var isinit   = false;
var mywindowok = true;

theurl="main.html"
windowcerrara = "images/x_a.gif"
windowcerrard = "images/x_d.gif"
windowcerraro = "images/x_o.gif"
windowtit    = "<font face=arial size=1>title</font>"
windowbordercolor  = "#000000"
windowbordercolorsel = "#ff8a00"
windowtitbgcolor   = "#d7dcd9"
windowtitbgcolorsel = "#ffffff"

var windowcerrarimg_a = new image(); windowcerrarimg_a.src=windowcerrara;
var windowcerrarimg_d = new image(); windowcerrarimg_d.src=windowcerrard;
var windowcerrarimg_o = new image(); windowcerrarimg_o.src=windowcerraro;

function whaitborders(){
if ( parent.chromewinb && parent.chromewinl && parent.chromewinr ){
parent.chromewinb.document.bgcolor=windowbordercolor
parent.chromewinl.document.bgcolor=windowbordercolor
parent.chromewinr.document.bgcolor=windowbordercolor
}else{
settimeout('whaitborders()', 100);
}
}
whaitborders()

//////////////////////////////////////////////////////////////// mouse move //////

function mousestatus(){
this.x    = null;
this.y    = null;
this.bt   = "up";
this.oldx  = null;
this.oldy  = null;
this.dx   = null;
this.dy   = null;
this.screeny = null;
this.screenx = null;

this.element = null;
this.event  = null;
}

var mouse = new mousestatus();

function actualizatemousestatus(e){
if (!e) var e = event
if ( (e.type=="mousedown" || e.type=="mouseup") && e.button!=1) return true

var x=e.x+document.body.scrollleft
var y=e.y+document.body.scrolltop

mouse.x  = x;
mouse.y  = y;

   if ( e.type == "mousedown" ) mouse.bt = "down";
else if ( e.type == "mouseup" )  mouse.bt = "up";

if (window.event){
mouse.screenx=window.event.screenx;
mouse.screeny=window.event.screeny;
}else{
mouse.screenx=-1;
mouse.screeny=-1;
}

}

function initmouseevents(){
document.onmousedown = actualizatemousestatus
document.onmousemove = actualizatemousestatus
document.onmouseup  = actualizatemousestatus
document.onselectstart = selectstart
document.ondragstart  = new function("actualizatemousestatus(event); return false;")
}

function selectstart(){
if ( event.srcelement.tagname != "input" && event.srcelement.tagname != "textarea"){return false;}
else{mouse.bt="up"; return true;}
}

initmouseevents()

//////////////////////////////////////////////////////////////// window drag //////

var mywindowbt  ="up";
var winclosestatus="up";

var ofx=0;
var ofy=0;
var opx=0;
var opy=0;
var px=0;
var py=0;

var wcpx1=-1, wcpy1=-1;
var wcpx2=-1, wcpy2=-1;

var wclosechanged = false;

function inittomovewin(){
if (mywindowok){
if (winclosestatus=="up" && ( mywindowbt=="up" || mywindowbt=="over") ){
if (isinit){
wcpx1 = document.all["mywindowclose"].style.pixelleft=document.body.clientwidth-18
wcpy1 = document.all["mywindowclose"].style.pixeltop =4
wcpx2 = wcpx1 + 11 - 1
wcpy2 = wcpy1 + 11 - 1
if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 && mouse.y <= wcpy2){
if (wclosechanged == false){
document.all["mywindowclose"].document.images["closewin"].src=windowcerrarimg_o.src
wclosechanged = true
}

}else if (wclosechanged == true){
document.all["mywindowclose"].document.images["closewin"].src=windowcerrarimg_d.src
wclosechanged = false
}
}
}

   if (  mouse.y <= 22 && mouse.y >= 1  && mywindowbt == "up"  && mouse.bt =="up"  ){mywindowbt = "over"}
else if ( ( mouse.y > 22 || mouse.y < 1 ) && mywindowbt == "over" && mouse.bt =="up"  ){mywindowbt = "up"}
else if (  mouse.y <= 22 && mouse.y >= 1  && mywindowbt == "over" && mouse.bt == "down" ){
self.window.focus();

if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 && mouse.y <= wcpy2 ){
winclosestatus="down"
document.all["mywindowclose"].document.images["closewin"].src=windowcerrarimg_a.src
}else{
document.all["mywindowtitle"].style.backgroundcolor = windowtitbgcolorsel
document.body.style.bordercolor = windowbordercolorsel
parent.chromewinb.document.bgcolor=windowbordercolorsel
parent.chromewinl.document.bgcolor=windowbordercolorsel
parent.chromewinr.document.bgcolor=windowbordercolorsel
ofx = mouse.x;
ofy = mouse.y;
opx = mouse.x;
opy = mouse.y;
}
mywindowbt="down";
}
else if ( mouse.bt =="up" && mywindowbt == "down" ){
mywindowbt="up";
ofx=0;
ofy=0;
opx=0;
opy=0;

if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 && mouse.y <= wcpy2 && winclosestatus=="down" ){top.window.close()}

winclosestatus="up"

if ( document.all["mywindowtitle"] ){
document.all["mywindowtitle"].style.backgroundcolor = windowtitbgcolor
document.body.style.bordercolor = windowbordercolor
parent.chromewinb.document.bgcolor=windowbordercolor
parent.chromewinl.document.bgcolor=windowbordercolor
parent.chromewinr.document.bgcolor=windowbordercolor
}

}
else if ( mywindowbt == "down" && winclosestatus == "up"){
var m_scrx = mouse.screenx;
var m_scry = mouse.screeny;
opx = px + ofx - m_scrx;
opy = py + ofy - m_scry;
px = m_scrx - ofx;
py = m_scry - ofy;
top.window.moveto(px , py);
}
}
settimeout('inittomovewin()',20);
}
inittomovewin()

//////////////////////////////////////////////////////////////// write title //////

function init(){
document.all["mywindowtitle"].innerhtml='<table width=100% height=20 border=0 cellpadding=0 cellspacing=0><tr><td valign=middle align=left>'+windowtit+'</td></tr></table>'
document.all["mywindowtitle"].style.backgroundcolor = windowtitbgcolor
document.all["mywindowclose"].document.images["closewin"].src=windowcerrarimg_d.src

settimeout('parent.main.location.replace("'+theurl+'")',200)

isinit=true
}

</script></head>
<body onload=init() topmargin=0 leftmargin=0 marginwidth=0 marginheight=0 scroll=no style="border:1px solid #000000;overflow:hidden;margin:0pt;" bgcolor=#ffffff>
<div id=mywindow>
<img src=images/none.gif width=100% height=20>
</div>
<div id=mywindowtitle>
<img width=1 height=1>
</div>
<div id=mywindowclose>
<img name=closewin src=images/none.gif border=0 width=11 height=11>
</div>
</body>
</html>

contacting.html 文件代码

<html>
<head>
<style type='text/css'>
body       { border: 0px; overflow: hidden; margin: 0pt;}
#stillloadingdiv { position: absolute; left: 0px; top: 0px; width: 100%; height: 19px; z-index: 1; background-color: #c0c0c0; layer-background-color: #c0c0c0; clip:rect(0,100%,19,0);}
</style>
</head>
<body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0 scroll='no'>
<div id=stillloadingdiv><table width=100% height=22 cellspacing=0 cellpadding=0><tr><td align=left valign=middle width=100%><font size=1 face=verdana color=#000000>  loading, please wait. . .</font></td></tr></table></div>
</body>
</html>

laod.html 文件代码

<html>
<head>
<title>of kai</title>
</head>
<frameset border=0 framespacing=0 frameborder=0 rows="22,100%,1">
<frame name=chromewint src="chromelesstit.html" scrolling=no noresize>
<frameset border=0 framespacing=0 frameborder=0 cols="1,100%,1">
<frame name=chromewinl src="about:blank" scrolling=no noresize>
<frame name=main src="contacting.html" scrolling="no" noresize>
<frame name=chromewinr src="about:blank" scrolling=no noresize>
</frameset>
<frame name=chromewinb src="about:blank" scrolling=no noresize>
  <noframes>
  </noframes>
</frameset>
<frameset>
</frameset>
</html>

【本文版权归作者与奥索网共同拥有，如需转载，请注明作者及出处】

上一篇： JSP简明教程：令人兴奋的脚本编程

下一篇： Android 圆角边框的实现方式汇总

无边框窗口代码详解

无边框窗口代码详解

java编程无向图结构的存储及DFS操作代码详解

无边框窗口代码详解_MySQL

无边框窗口代码详解

java编程无向图结构的存储及DFS操作代码详解

js实现无刷新监听URL的变化示例代码详解

详解pycharm的python包opencv（cv2）无代码提示问题的解决

PHP+AJAX无刷新分页实现代码详解(1/2)

通过CSS3伪元素完成逐渐发光的边框的代码详解

PHP+AJAX无刷新分页实现代码详解(1/2)_PHP教程