| nn4 문제 수정한 페이지 | Go to up |
나올수 있는 창의 상황을 3가지로 경우로 예상합니다.
1. 프레임 페이지에서 수평이동막대가 생기면 아예 새창으로 엽니다.
2. 프레임 페이지가 아닌 전체 화면 페이지에서 수평이동막대가 생기면 마우스 이벤트를 지정하지 않습니다.
그래서 페이지 움직임을 할 수 없습니다.
3. 프레임 페이지가 아니고 전체 화면 페이지도 아닌 크기를 늘릴수 있는 페이지에서 수평이동막대가 생기면
수평이동막대가 생기지 않는 만큼의 크기로 창을 늘려줍니다.
페이지의 폭보다 큰 document가 있을때 그것을 확인하여 그에 맞는 동작을 합니다. 이것을 하기 위해서는 앞
페이지의 함수 init()를 수정하였습니다. 나머지는 똑같고 ie4는 고칠데가 없습니다.
function init() {
if(n4) {
window.onresize=new Function("setTimeout('self.location.reload()', 1000)");
if(self != parent) {
if(document.width > window.innerWidth+4) {
window.open(self.location.href, "")
return
}
}
else if(document.width > window.screen.width-4) {
alert("모니터의 해상도가 작거나 페이지에 폭보다 큰
문서가 들어있습니다.\n\n"이 페이지에서
마우스로 페이지 움직임을 할 수 없습니다.");
return;
}
else if(document.width > window.innerWidth) {
window.moveTo(0,0);
window.resizeTo(document.width, window.innerHeight)
return
}
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP|Event.DBLCLICK)
}
else if(e4) document.onmousemove = mMove
document.onmousedown = mDown
document.onmouseup = mUp
document.ondblclick=new Function("return false");
scrollTopStart=scrollTopEnd=scrollTopBit=0;
scrollLeftStart=scrollLeftEnd=scrollLeftBit=0;
}
빨간색의 코드는 움직임할 페이지가 프레임 페이지일 경우 프레임을 조절할 수 없어서 새로운 창에 프레임 페이지를
가지고 옵니다. +4는 프레임 페이지에서 document.width와 window.innerWidth 에서의 차이입니다. 1px의 크기도
놓치지 않게 지정합니다.
(참조하기)
이러한 여러가지의 문제로 이 페이지보다 앞페이지가 나은 것이라고 생각합니다. 비록 페이지 움직임을 할 수 없는 경우가 많지만 nn4에서 창의 크기를 바꾸는 것은 잘못된 페이지를 출력할 수 있기 때문에 주의를 해야합니다. 널리 알려진 resize 버그입니다. 레이어나 페이지의 style을 가지고 있는 페이지에서 창의 크기를 바꾸면 기존의 레이어나 페이지의 정보가 부정확하게 페이지에 나올 수 있는 nn4.05까지 나오는 버그입니다. 이 문서의 크기는 이미지, width 100%가 넘는 table, 레이어가 페이지에서의 처음 위치에서 레이어의 내용물의 크기를 더하여 페이지 폭보다 큰 경우입니다.
이것을 다시 원래의 레이어 정보로 페이지에 배치할려면 페이지를 재출력(reload)해야 합니다.
사용자가 브라우저의 reload 단추를 누르면 되지만, 그것을 기대할 수는 없습니다. 그래서 페이지를 강제로
window의 resize 이벤트를 사용하여
window.onresize=new Function("self.location.reload()") 로
페이지를 재출력합니다. 그러면 이 문제를 해결할 수 있습니다. 하지만, 이때 위의 파란색의 경우에 문제가
일어납니다. 레이어가 페이지의 폭보다 커서 페이지에 수평이동막대가 생기면 계속 resize이벤트가 일어납니다.
사용자가 STOP 단추로 페이지 전송을 멈출때까지 말입니다.
이 문제를 해결할 수 있는 방법을 저는 3가지 알고 있습니다.
첫번째는 이 페이지의 방법으로 창의 크기를 늘려주는데, 위의 파란색의 경우가 나오지 않아야 합니다. 즉, 늘릴수 있는 페이지의 크기보다 큰 레이어가 없는 페이지를 만드는 것입니다. 하지만, 이것도 사용자의 해상도를 일일이 확인하여 해상도에 맞는 페이지를 따로 만들어야 합니다.
두번째는 COOKIE를 사용하는 방법입니다. resize 이벤트가 일어났을 때, 한번만 재출력을 하고 cookie에게 한번 재출력했다는 정보를 저장합니다. 그리고 그것을 읽어 두번째 재출력을 막는 방법입니다. 그리고 이것을 일일이 페이지에 해주어야 합니다.
마지막 세번재는 창의 크기를 바꿀 수 없는 새창을 여는것입니다.
3가지 모두 단점이 있습니다.
위의 3가지 방법을 사용하지 않기 위해서는 nn4에서 충분한 여유의 크기를 가지는 레이어를 사용해야 합니다.
그러면 resize 버그를 만나는 일이 적어질 것입니다. 쩝.. (참조)
--
nn4.05에서 window.onresize 이벤트를 지정할 때, 시간 간격을 주어야 합니다. 바로 지정을 하면
페이지에 가로 이동막대가 생긴것 처럼 계속 지정함수를 호출합니다.
문서의 양에 따라서 이 문제가 생길수도 안생길수도 있지만, 아래처럼 하면 페이지 문서의 크기에 상관없이
문제를 예방할 수 있습니다. nn4.05 를 위해서 아래처럼 지정하세요..
function init() {
window.onresize=new Function("setTimeout('self.location.reload()', 1000)");
}
<body onLoad="setTimeout('init()', 111)">
이벤트가 오작동할 때 setTimeout()를 사용하세요.. 마술사입니다. :)