실행하기

레이어가 이동하는 것은 한 페이지에서만 보입니다. 한 페이지가 넘는 이동막대로 페이지를 끌어 옮겨서 볼 수 있는 한 페이지 아래에 있는 페이지에서는 이동하는 레이어가 보이지 않기 때문입니다.

또는 페이지에 꽉차는 레이어를 만들 때 레이어의 크기를 어떻게 정해야할지는 페이지의 크기를 알아야 합니다.

nn4 : window.innerWidth, window.innerHeight
ie4 : document.body.clientWidth, document.body.clientHeight

레이어를 이동시킬 때 nn4에서 주의해야할 점이 있습니다. 전체 페이지에서는 레이어가 이동할 수 있는 거리는 수평으로는 window.innerWidth 의 폭이고 수직으로는 window.innerHeight 폭입니다. 이 폭안에서 전체 레이어가 보입니다. 이 폭을 넘는만큼 레이어는 보이지 않습니다.

페이지가 전체 페이지라면 간단히 window.innerWidth와 window.innerHeight로 이동할 폭을 계산할 수 있지만, 페이지가 프레임 페이지라면 좀 복잡합니다. 전체 페이지에서는 나오지 않는 약간의 틈이 각 프레임 페이지에 생깁니다. 프레임 페이지에서는 frame border의 크기에 따라서 window.innerWidth, window.innerheight의 값이 차이가 납니다. ie4의 document.body.clientWidth, document.body.clientHeight는 이런 문제가 없습니다.

아래는 frame border 값에 따른 nn4의 window.innerWidth, window.innerHeight 값입니다. frame border=0에서 100 이였을 때 각 frame border의 크기에 따른 값입니다.

문제는 이렇게 프레임에서 window.innerWidth와 window.innerHeight가 전체 보이는 페이지의 크기를 나타내지 않는다는 데 문제가 있습니다. 작은 차이지만 레이어를 페이지 가장 오른쪽이나 가장 밑으로 보낸다면 이 차이만큼 레이어가 끝으로 다 이동하지 않습니다. 레이어를 이동시키는 경우는 이 작은 차이가 별로 눈에 들어오지 않겠지만 페이지를 가득 채우는 래이어를 만든다면 nn4에서 페이지의 크기를 나타내는 위의 window.innerWidth, window.innerHeight가 프레임 페이지에서 정확하지 않습니다. window.innerWidth, window.innerHeightfm 를 참조하여 레이어의 크기를 정하면 레이어의 좌표를 0,0에 두었을 때 페이지 오른쪽과 아래쪽에서 약간의 틈이 보입니다. 전체 페이지에서는 이 문제가 없고 정확히 window.innerWidth, window.innerHeight에서 레이어가 보입니다.

그래서 프레임 페이지에서 레이어가 이동할 수 있는 크기의 면적, 즉 한 화면에 다 보이는 정확한 크기를 구해야 합니다. 한 화면이 넘는 내용을 가지고 있는 페이지는 이동막대가 생깁니다. nn4의 window.innerWidth, window.innerHeight는 16px 크기의 이동막대 폭의 크기도 포함합니다. 반면에 ie4의 cilentWidth, clientHeight는 이동막대 폭은 포함하지 않습니다. 그래서, nn4에서 페이지가 이동막대가 있는지를 학인하기 위해서 문서가 한 페이지가 넘는지를 확인해야 합니다. 그래야 레이어가 이동막대 밑으로 들어가는 것을 막을 수 있습니다.

if(document.width > window.innerWidth) alert("수평 이동막대 생김")
if(document.height > window.innerHeight) alert("수직 이동막대 생김")

if(n4) {
  if(document.width > window.innerWidth+4) alert("수평 이동막대 생김")
  if(document.height > window.innerHeight+4) alert("수직 이동막대 생김")
}

if(n4) {
  if(document.width > window.innerWidth+2) alert("수평 이동막대 생김")
  if(document.height > window.innerHeight+2) alert("수직 이동막대 생김")
}

레이어.left = window.innerWidth - 레이어.document.width + 4

function pageSize(leftOrTop) { 
	
   if(n4) {
      var leftBar=topBar=0;
      var returnValue = null;
		
      if(self != parent) { 
         leftBar = 4; // frame border 0에서 실제 창의 크기를 보정함
         topBar = 4; 

         if(document.width > window.innerWidth+4) topBar += -16; 
         if(document.height > window.innerHeight+4) leftBar += -16;
      }
      else { 
         if(document.width > window.innerWidth) topBar += -16;
         if(document.height > window.innerHeight) leftBar += -16;
      }
		
      if(leftOrTop == "LS") returnValue = window.innerWidth + leftBar
      if(leftOrTop == "TS") returnValue = window.innerHeight + topBar
   }
   else if(e4) { 
      if(leftOrTop == "LS") returnValue = document.body.clientWidth
      if(leftOrTop == "TS") returnValue = document.body.clientHeight
   }

   return returnValue
}

실행하기(nn4,ie4)