Html & Script

Chromeless Window 에 대해서

컨텐츠 정보

본문

좀전에 썼는데 날라가서 이번엔 짧게 씁니다.

이거 뭔지들 다 아시죠? 저희 사이트에서 필요해서리 그냥 쓰다가 2.1 은 열라 후졌었는데
3.0 이 있길래 써봤더니 좋아서 올립니다.

설명짧게 쓰겠습니다. 무지 쉬우니까 별거 없습니다.

스크립트 쓰면 짤리니까 스크립트는 젤 마지막에 쓰지요..

먼저 win.open 이랑 똑같은 원리입니다.

오픈할때는 onLoad를 하시던 onClick을 하시던 상관없습니다.

<a href="javascript://" onClick="win1 = openIT('./chrome.htm', '테스트1', 410, 153, 'win1');" onFocus="window.status=''; this.blur();">

이렇게 오픈하시면 됩니다. openIT 라는건 javascript function 인데 밑에 쓰겠습니다. 그대로 따서 적으면 됩니다. 첫번째 인자는 소스 파일, 두번째 인자는 타이틀, 세번째 인자는 width값, 네번째 인자는 height값, 다섯번째 인자는 윈도우 네임입니다. 중요한건 win1 = openIT 이 부분입니다. win1 이라는 넘한테 저걸 할당해 버리고 저걸로 제어 하는겁니다.

2.1 때는 background 도 안되고, 창 제어도 안됐는데 3.0 부터는 됩니다. 3.1 도 있다는데
뭐가 다른지도 모르고 귀찮고 해서 3.0으로 올립니다. 아마 방식을 똑같을듯..

onFocus 이벤트 안주면 에러납니다. 소스 보시면 알겁니다. 왜 에러 나는지..

창 닫을때는

<a href="javascript://" onClick="if (top.win1 && !top.win1.closed) win1.close();" onFocus="window.status='';this.blur()">

이렇게 코딩합니다. 열때 win1 이란 넘으로 열었으니까 닫을때 win1 이란 넘으로 닫아야겠죠?
역시 onFocus 이벤트 안주면 에러납니다. top 을 보시고 눈치 빠른 분들은 다 눈치채셨을겁니다.

시스템 성능에 좌우됩니다. 회사컴은 펜4 1.7 이라 창 몇개 띄워도 잘 돌아가는데
집에서는 애슬론 700 인데 죽음입니다. 남발하지 말고 신기한거 한개씩 띄워주면 좋을듯
합니다.
저희 회사는 플레이어 맹그러서 쓰고 있습니다.

장점은 별로 없고, 걍 디자인 적인 요소가 좀 있겠죠. 제어 되는것도 편하고.. 소스 보기도
어렵습니다. 제가 대충 소스 볼라고 몇번 해봤는데 안되더라구요. 뭐 방법은 있겠지만
어쨌든 왠만하면 보기 어렵습니다.

스크립트는 하나는 window 자체 script 고 하나는 openIT 펑션에 대한 스크립트 입니다.
두개를 같은 파일에 넣어서 땡기시던지, 아님 따로 따로 땡기시던지, 아님 둘다 안에다
코드로 박던지 맘대로들 하시고..

스크립트 나갑니다.

<script Language='javascript'>
<!--
function openIT(theURL, titWIN, W, H, wname)
{
        if (theURL == '')
        {
                return;
        }
        else
        {
                CLOSEdwn        = "경로/close_dwn.gif"
                CLOSEup = "경로/close_up.gif"
                CLOSEovr = "경로/close_ovr.gif"
                MINIdwn = "경로/mini_dwn.gif"
                MINIup = "경로/mini_up.gif"
                MINIovr        = "경로/mini_ovr.gif"
                NONEgrf = "경로/none.gif"
                CLOCKgrf        = "경로/clock.gif"
                titHTML        = "<font face=Tahoma size=1> Chromeless Window 예제</font>"
                winBORDERCOLOR = "#000000"
                winBORDERCOLORsel = "#FFFFFF"
                winBGCOLOR = "#F7F7F7"
                winBGCOLORsel = "#EFEFEF"
                X =        screen.width - 415;
                Y = screen.height - 230;

                return openchromeless(theURL, wname, W, H, X, Y, NONEgrf, CLOSEdwn, CLOSEup, CLOSEovr, MINIdwn, MINIup, MINIovr, CLOCKgrf, titHTML, titWIN, winBORDERCOLOR, winBORDERCOLORsel, winBGCOLOR, winBGCOLORsel)
        }
}
-->
</script>

이건 윈도우를 오픈하는 스크립트 입니다. 필요한 인자는 아라서 고르시고 수정하시기 바랍니다.


/*
CHROMELESS WINDOWS v.30.4
Generate a chromeless window on IE4,IE5.x,IE6 on WIN32 and a regular one on the others browsers.

(c) Gabriel Suchowolski power[z]one / www.microbians.com / powerz@microbians.com
Distributed under the terms of the GNU Library General Public License (www.gnu.org)
*/

function openchromeless(theURL, wname, W, H, X, Y, NONEgrf, CLOSEdwn, CLOSEup, CLOSEovr, MINIdwn, MINIup, MINIovr, CLOCKgrf, titHTML, titWIN, winBORDERCOLOR, winBORDERCOLORsel, winBGCOLOR, winBGCOLORsel) {

        var isie = false
        var isv55= false
        var iswin= false

        if ( navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion)>=4 ) {
                isie=true
                if ( navigator.appVersion.substring(navigator.appVersion.indexOf("MSIE ")+5,navigator.appVersion.indexOf("MSIE ")+8) >= 5.5 ) isv55=true;
        }

        if ( navigator.userAgent.toLowerCase().indexOf("win")!=-1 ) iswin=true

        if (X==null) var X = Math.ceil( (window.screen.width  - W) / 2 );
        if (Y==null) var Y = Math.ceil( (window.screen.height - H) / 2 );

        if (isie) { H=H+20+3; W=W+2; }
        var s = ",width="+ W +",height="+ H ;

        if (isie && iswin) {

var chromeTIThtml = '\\n' +
'<html>                                                                                                                                                                '+ '\\n'+
'<head>                                                                                                                                                                '+ '\\n'+
'<style type="text/css">                                                                                                                                                '+ '\\n'+
'#crtMOVE  { position: absolute; left:  0px; top: 0px; z-index: 2;                                                                }                                                '+ '\\n'+
'#txtTITLE  { position: absolute; left:  0px; top: 0px; width:  100%;  height: 20px; z-index: 1; clip:rect(0,100%,20,0); }                                                '+ '\\n'+
'#btnCLOSE  { position: absolute; left: -20px; top: 4px; width:  11px; height: 11px; z-index: 3; clip:rect(0,11,11,0);  }                                                '+ '\\n'+
'#btnMINI  { position: absolute; left: -20px; top: 4px; width:  11px; height: 11px; z-index: 3; clip:rect(0,11,11,0);  }                                                '+ '\\n'+
'#grfCLOCK  { position: absolute; left: -20px; top: 4px; width:  11px; height: 11px; z-index: 3; clip:rect(0,11,11,0);  }                                                '+ '\\n'+
'</style>                                                                                                                                                                '+ '\\n'+
'<script language="javascript">                                                                                                                                        '+ '\\n'+
'var imgCLOSEdwn = new Image(); imgCLOSEdwn.src = "'+ CLOSEdwn +'";                                                                                                          '+ '\\n'+
'var imgCLOSEup  = new Image(); imgCLOSEup.src  = "'+ CLOSEup  +'";                                                                                                        '+ '\\n'+
'var imgCLOSEovr = new Image(); imgCLOSEovr.src = "'+ CLOSEovr +'";                                                                                                        '+ '\\n'+
'var imgMINIdwn  = new Image(); imgMINIdwn.src  = "'+ MINIdwn +'";                                                                                                        '+ '\\n'+
'var imgMINIup  = new Image(); imgMINIup.src  = "'+ MINIup  +'";                                                                                                        '+ '\\n'+
'var imgMINIovr  = new Image(); imgMINIovr.src  = "'+ MINIovr +'";                                                                                                        '+ '\\n'+
'var CLOCKgrfImg = new Image(); CLOCKgrfImg.src = "'+ CLOCKgrf +'";                                                                                                '+ '\\n'+
'document.onselectstart = new Function("return false;")                                                                                                                '+ '\\n'+
'document.ondragstart  = new Function("moveWIN();return false;")                                                                                                                '+ '\\n'+
'document.oncontextmenu = new Function("return false;")                                                                                                                '+ '\\n'+
'document.onmousemove  = moveWIN                                                                                                                                        '+ '\\n'+
'winSTATUS = "up";                                                                                                                                                        '+ '\\n'+
'function setLAYOUT() {                                                                                                                                                '+ '\\n'+
'        document.all["btnCLOSE"].style.pixelLeft=document.body.clientWidth-18                                                                                                '+ '\\n'+
'        if ( top.mainloaded )        {                                                                                                                                        '+ '\\n'+
'                document.all["grfCLOCK"].style.visibility = "hidden";                                                                                                        '+ '\\n'

if (isv55) {
chromeTIThtml += '\\n' +
'                document.all["btnMINI"].style.visibility  = "visible";                                                                                                        '+ '\\n'+
'                document.all["btnMINI"].style.pixelLeft=document.body.clientWidth-38;                                                                                        '+ '\\n'
}

chromeTIThtml += '\\n' +
'        }                                                                                                                                                                '+ '\\n'+
'        else {                                                                                                                                                                '+ '\\n'+
'                document.all["btnMINI"].style.visibility  = "hidden";                                                                                                        '+ '\\n'+
'                document.all["grfCLOCK"].style.pixelLeft=document.body.clientWidth-38;                                                                                        '+ '\\n'+
'                setTimeout("setLAYOUT()",500);                                                                                                                                '+ '\\n'+
'        }                                                                                                                                                                '+ '\\n'+
'}                                                                                                                                                                        '+ '\\n'+
'function minimizeWIN() {                                                                                                                                                  '+ '\\n'+
'        top.window.moveTo(0,-4000);                                                                                                                                        '+ '\\n'+
'        if ( (top.opener) && (!top.opener.closed) ) { top.opener.window.focus(); }                                                                                        '+ '\\n'+
'        top.window.blur()                                                                                                                                                '+ '\\n'+
'}                                                                                                                                                                        '+ '\\n'+
'function moveWIN() {                                                                                                                                                        '+ '\\n'+
'        if ( winSTATUS == "down") {                                                                                                                                        '+ '\\n'+
'                document.body.bgColor = "'+winBGCOLORsel+'"                                                                                                            '+ '\\n'+
'                parent.bordeM.document.body.bgColor = "'+winBORDERCOLORsel+'"                                                                                            '+ '\\n'+
'                parent.bordeT.document.body.bgColor = "'+winBORDERCOLORsel+'"                                                                                            '+ '\\n'+
'                parent.bordeB.document.body.bgColor = "'+winBORDERCOLORsel+'"                                                                                            '+ '\\n'+
'                parent.bordeL.document.body.bgColor = "'+winBORDERCOLORsel+'"                                                                                            '+ '\\n'+
'                parent.bordeR.document.body.bgColor = "'+winBORDERCOLORsel+'"                                                                                            '+ '\\n'+
'                ofx =  event.x                                                                                                                                                '+ '\\n'+
'                ofy =  event.y                                                                                                                                                '+ '\\n'+
'                winSTATUS = "drag"                                                                                                                                        '+ '\\n'+
'        }                                                                                                                                                                '+ '\\n'+
'        else if ( winSTATUS == "drag") {                                                                                                                                '+ '\\n'+
'                px = event.screenX - ofx - 1;                                                                                                                                '+ '\\n'+
'                py = event.screenY - ofy - 1;                                                                                                                                '+ '\\n'+
'                top.window.x=px;                                                                                                                                        '+ '\\n'+
'                top.window.y=py;                                                                                                                                        '+ '\\n'+
'                top.window.moveTo(px , py);                                                                                                                                '+ '\\n'+
'        } else {                                                                                                                                                        '+ '\\n'+
'                document.body.bgColor = "'+winBGCOLOR+'"                                                                                                                    '+ '\\n'+
'                parent.bordeM.document.body.bgColor = "'+winBORDERCOLOR+'"                                                                                                    '+ '\\n'+
'                parent.bordeT.document.body.bgColor = "'+winBORDERCOLOR+'"                                                                                                    '+ '\\n'+
'                parent.bordeB.document.body.bgColor = "'+winBORDERCOLOR+'"                                                                                                    '+ '\\n'+
'                parent.bordeL.document.body.bgColor = "'+winBORDERCOLOR+'"                                                                                                    '+ '\\n'+
'                parent.bordeR.document.body.bgColor = "'+winBORDERCOLOR+'"                                                                                                    '+ '\\n'+
'                winStatus = "up"                                                                                                                                        '+ '\\n'+
'        }                                                                                                                                                                '+ '\\n'+
'}                                                                                                                                                                        '+ '\\n'+
'</script>                                                                                                                                                                '+ '\\n'+
'</head>                                                                    &nbs

관련자료

댓글 0
등록된 댓글이 없습니다.
Today's proverb
우리의 꿈은, 뒤에 오는 사람들이 우리를 딛고 우리 위에서 이루게 하는 것입니다. 나는 평생을 창조적인 작업을 위해서 살아왔습니다. 누가 하라고 해서 한 것이 아니라 그것이 나의 삶 그 자체의 즐거움이었기 때문입니다. 현실을 직시하며 현재의 수준을 유지하라. 그리고 더 먼 곳을 향하는 시야를 가져라.