无边框窗口代码详解

　　/*代码思路

　　此代码会以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的无边框窗口。

　　把代码第一部分放到该文件中。

　　然后将连接

　　改为

　　在该文件所在目录内

　　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个文件拷入改目录.

　　对于初学者，以上则足够了。如果想要更好的效果，自己改代码。

<!--//代码第一部分。

　　function doOpen(){

　　theurl="main.html";

　　wname ="name";

　　w=750;

　　h=400;

　　/* 参数说明：

　　theurl="main.html"; 打开窗口的网址

　　wname ="name"; 打开窗口的name属性

　　w=750; 打开窗口的宽度

　　h=400; 打开窗口的高度

　　open(theurl, wname, w, h);

　　};

　　function open(theURL, wname, W, H) {

　　var windowW = W;//确定网页的宽度

　　var windowH = H;//确定网页的高度

　　var windowX = Math.ceil( (window.screen.width - windowW) / 2 );

　　var windowY = Math.ceil( (window.screen.height - windowH) / 2 );//确定网页的坐标

　　if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion)>=4) isie=true; else isie=false;

　　s = ",width="+W+",height="+H;

　　if (isie===false){//加入对Nescape系列浏览器的支持

　　splashWin = window.open( "main.html" , wname, "fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0"+s)

　　splashWin.resizeTo( Math.ceil( W ) , Math.ceil( H ) )

　　splashWin.moveTo ( Math.ceil( windowX ) , Math.ceil( windowY ) )

　　}else{

　　splashWin = window.open( "" , wname, "fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0"+s)

　　splashWin.resizeTo( Math.ceil( W ) , Math.ceil( H ) )

　　splashWin.moveTo ( Math.ceil( windowX ) , Math.ceil( windowY ) )

　　splashWin.document.open("text/html", "replace");

　　splashWin.document.write("<html><style type='text/css'>\n");

　　splashWin.document.write("body{border: 1px solid #000000; overflow: hidden; margin: 0pt;}");

　　splashWin.document.write("#stillloadingDiv {position: absolute; left: 0px; top: 0px; width: 100%px; height: 19px; z-index: 1; background-color: #C0C0C0; layer-background-color: #C0C0C0; clip:rect(0,100%,19,0);}");

　　splashWin.document.write("</style>\n");

　　splashWin.document.write("<body onload=\"top.document.location.replace('load.html")\" TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 scroll='no'>");

　　splashWin.document.write("<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> System energizing ...</font></td></tr></table></div>");

　　splashWin.document.write("</body></html>");

　　splashWin.document.close();

　　}

　　splashWin.focus();//代码第一部分完

　　}//-->

　　chromelesstit.html 文件代码

　　#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>

　　// 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>

　　</div>

　　</div>

　　</div>

　　</body>

　　</html>

　　contacting.html 文件代码

　　<html>

　　<head>

　　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>

　　<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>

　　</HEAD>

　　</frameset>

　　</noframes>

　　</frameset>

　　</frameset>

　　</HTML>

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

教程首页更多教程