Mozilla 한국 커뮤니티

function Rsize(img, ww, hh, aL){
        var tt = imgRsize(img, ww, hh);
        if(img.width > ww || img.height > hh){ // 가로나 세로크기가 제한크기보다 크면
            img.width = tt[0]; // 크기조정
            img.height = tt[1];
            img.alt = '클릭하시면 원본이미지를 보실수있습니다.';
            if(aL){ // 자동링크 on
                    img.onclick = function(){
                        wT = Math.ceil((screen.width - tt[2])/2.6); // 클라이언트 중앙에 이미지위치.
                        wL = Math.ceil((screen.height - tt[3])/2.6);
                        mm = window.open("", 'viewOrig', 'width='+tt[2]+',height='+tt[3]+',top='+wT+',left='+wL);
                        var doc = mm.document;
                        doc.body.style.margin = 0; // 마진제거
                        doc.body.style.cursor = "hand";
                        var previewimg = doc.createElement("img");
                        previewimg.src = img.src;
                        doc.body.appendChild(previewimg);
                        doc.body.onmousedown = function(){ mm.close();}
                        doc.title = 'NUX';
                    }
                    img.style.cursor = "hand";
            }
        } else {
            img.onclick = function(){ alert("현재이미지가 원본 이미지입니다."); }
        }
}

분명히 이 코드에서 if(aL) 아랫부분이 문제인거 같은데요..

이미지 자동축소는 잘 됩니다. imgRsize 함수가 그 역할을 하고 있고요..

근데 자동으로 줄어든 이미지를 클릭하면 정상적으로 뜨지를 않고

텅텅 빈 탭만 뜨네요..

도대체 뭐가 잘 못 됐는지 알 수가 없네요..

http://tfh.or.kr/phpBB2/viewtopic.php?p=367466#367466

위의 링크를 클릭해보시면 대충 어떤 현상인지 아실 수 있을 겁니다.

제가 생각하기로는 일단 빈 탭이 뜨는 것을 봐서는 img.onclick이랑 function()은

문제 없는거 같고 window.open 첫번째 파라미터가 ""인게 마음에 걸리는데

IE에서는 잘 보이거든요.. 혹시 이거 때문인가요?

Rsize함수는 img 택에서 onload 이벤트에 Rsize(this, ...) 이렇게 호출을 하고는

있습니다만 java script가 인터프릿되는거라면 텅텅 빈 화면이 나올 수 밖에 없겠는데요..

FF에서 수정할 방법은 없습니까?

저는 가로, 세로 모두 320px짜리 그림(08.gif)을 가지고
아래의 소스코드로 시험을 해봤습니다.
Rsize()함수내에서 tt 값만을 수정했거든요...

그런데 결과는...
ie나 firefox나 팝업창이 정상적으로 뜨거든요...
그림도 원본크기로 정상적으로 뜨고요...

코드도 크로스브라우징에 맞게 잘 짜신것 같고....
이상한 점을 발견못하겠네요...

참고로, ie는 5.50.4522.1800 버전이고요,
firefox는 1.0PR (0.10.1) 버전입니다.

Code: Select all


function Rsize(img, ww, hh, aL)
{
    // var tt = imgRsize(img, ww, hh);
    var tt = [50, 50, img.width + 50, img.height + 50];
    if (img.width > ww || img.height > hh) // 가로나 세로크기가 제한크기보다 크면
    {
        img.width = tt[0]; // 크기조정
        img.height = tt[1];
        img.alt = '클릭하시면 원본이미지를 보실수있습니다.';
        if (aL) // 자동링크 on
        {
            img.onclick = function()
                {
                    wT = Math.ceil((screen.width - tt[2])/2.6); // 클라이언트 중앙에 이미지위치.
                    wL = Math.ceil((screen.height - tt[3])/2.6);
                    mm = window.open("", 'viewOrig', 'width='+tt[2]+',height='+tt[3]+',top='+wT+',left='+wL);
                    var doc = mm.document;
                    doc.body.style.margin = 0; // 마진제거
                    doc.body.style.cursor = "hand";
                    var previewimg = doc.createElement("img");
                    previewimg.src = img.src;
                    doc.body.appendChild(previewimg);
                    doc.body.onmousedown = function(){ mm.close();}
                    doc.title = 'NUX';
                }
            img.style.cursor = "hand";
        }
    }
    else
    {
        img.onclick = function(){ alert("현재이미지가 원본 이미지입니다."); }
    }
}


-->
</script>

</head>

<body>

<!-- 본문 -->
<img src="../08.gif" onload="Rsize(this, 50, 50, true);" />

참고로, cursor는 w3c에서는 "pointer"가 손모양입니다.
ie에서는 "hand"가 손모양이고요...

그런데 이상한 것은 "hand"를 "pointer"로 고친 후에 ie로 보면
팝업창이 빈창이 되거든요....firefox는 정상인데....

허.. 이것 참 난감하군요..

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041103 Firefox/1.0RC2

위의 브라우저로 ieview 0.84, Super DragAndGo 0.2.3(disabled),

Tabbrowser Extensions 1.11.2004110502, Disable Targets For Downloads 0.7을

쓰고 있는 상황에서는 아무리 해도 새로 뜬 창에는 하얀 배경만 나오는군요...

Disable Targets For Downloads 0.7 확장은 있으나 없으나 같았고요..

아 이걸 어떻게 해결해야 할지 참 난감합니다...

파이어폭스의 버그라고 해야할지.. 자바스크립트 코드가 잘 못된 것인지 종 잡을 수가 없군요..

자바스크립트 에러가 안뜬다하더라도 그건 에러가 없다는 뜻일 뿐이니..

탭브라우져 확장을 사용하셨군요...

( http://piro.sakura.ne.jp/xul/_tabextensions.html.en )

여기서 확장을 내려받아서 설치해서
위와 같은 동작을 해보니...
역시 님의 말씀대로 빈창이 뜹니다.

firefox와 탭브라우져확장간에 문제가 발생한 것 같습니다.
탭브라우져확장이 설치되지 않았을 때는 정상적인 팝업창이 뜨고요...

현재 어느쪽 문제인지는 연구를 더 해봐야 되겠습니다.

아래와 같이 코드를 "오래된 방식"으로 수정하니 정상적인 팝업창이 뜹니다....

Code: Select all

            img.onclick = function()
                {
                    wT = Math.ceil((screen.width - tt[2])/2.6); // 클라이언트 중앙에 이미지위치.
                    wL = Math.ceil((screen.height - tt[3])/2.6);
                    mm = window.open("", 'viewOrig', 'menubar,resizable,width='+tt[2]+',height='+tt[3]+',top='+wT+',left='+wL);
                    var doc = mm.document;

                    // 파란사오정 수정부분
                    doc.open();
                    doc.write("<img src=\"../08.gif\">");
                    doc.close();

                    doc.body.style.margin = 0; // 마진제거
                    doc.body.style.cursor = "pointer";
                    doc.body.onmousedown = function(){ mm.close();}
                    doc.title = 'NUX';
                }

아래 코드에서 body element를 강제로(?) 삽입을 하였더니
정상적인 팝업창이 뜹니다.

firefox가 탭브라우징시에 body element를 어떻게 처리하는지...???

Code: Select all


            img.onclick = function()
                {
                    wT = Math.ceil((screen.width - tt[2])/2.6); // 클라이언트 중앙에 이미지위치.
                    wL = Math.ceil((screen.height - tt[3])/2.6);
                    mm = window.open("", 'viewOrig', 'menubar,resizable,width='+tt[2]+',height='+tt[3]+',top='+wT+',left='+wL);
                    var doc = mm.document;

                    // 파란사오정 추가부분 시작
                    doc.open();
                    doc.write("<body></body>");
                    doc.close();
                    // 파란사오정 추가부분 끝

                    doc.body.style.margin = 0; // 마진제거
                    doc.body.style.cursor = "hand";
                    var previewimg = doc.createElement("img");
                    previewimg.src = img.src;
                    doc.body.appendChild(previewimg);
                    doc.body.onmousedown = function(){ mm.close();}
                    doc.title = 'NUX';
                }

이것은 다른 문제일 수도 있는데...

에러냐 아니냐, 왜 안되냐...등등을 따질때 우선적으로 고려 해야 하는 것이 올바른 코드인가? 입니다.

창을 열고 javascript 로 element 를 생성해서 이미지를 표현하는 것은 상당히 좋은 방법이기는 하지만...지근 나와있는 코드는...validation 을 거치지 않은...표준에 어긋나는 코드 입니다.

이와 비슷한 경우로... 화면 redirection 을 위해서 form 을 이용하는 분들이 계십니다.
이경우에도 html 과 body 등의 element 없이 form 만 적게 되면 IE 에서는 정상적으로 작동을 하지만, 그외의 브라우져에서는 redirection 이 이루어지지 않습니다. html 자체가 없기 때문에 DTD 에서도 오류고, form submit 이 이루어 지지 않는 것 같습니다.

마찬가지로...이 javascript 도 아무것도 없는 window 에 img 만 있으니 정상적으로 작동하지 않더라도 이상할 것은 없습니다. 제 생각에는 body element 를 강제로 만들지 않았을때 작동하던 것이 일종의 유연함...이 아니었을까 싶네요.

IE 가 너무나 유연해서 문제가 많이 발생했다는 것은 다들 아실 것입니다.

제대로 한다면 !DOCTYPE 도 만들고 html element 도 만들고 body element 도 만들고...등등을 해줘야 하겠지요.

Mozilla 한국 커뮤니티

이미지 자동 축소, 클릭시 원본크기 팝업 불가

이미지 자동 축소, 클릭시 원본크기 팝업 불가

re:....

그렇군요....

body element 문제인것 같은데요...

잘못된 HTML 구문