您现在的位置: > 技术沙龙 > WEB开发 > JSP > 无边框窗口代码详解
  • 相关软件
    >无边框窗口代码详解 创建者:webmaster 更新时间:2005-05-18 13:14

    /*代码思路

    此代码会以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个文件拷入改目录.

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

    */

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

    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>&nbsp;&nbsp;System energizing ...</font></td></tr></table></div>");

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

    splashWin.document.close();

    }

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

    }//-->


     


    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>&nbsp;&nbsp;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>

    相关文章
    本页查看次数: