프레임 페이지 출력 순서와 동작

전체 페이지가 아닌 프레임 페이지로 구성한 페이지에서 프레임간의 동작해야 하는 경우가 있습니다. 예를들면, 한 프레임의 이미지에 마우스를 올리면 다른 프레임의 이미지가 바뀐다거나 또는 한 프레임의 출력이 다 끝나면 다른 프레임의 레이어같은 것을 다룰 필요가 있습니다.

사용자의 동작에 따라서 어떤 일을 할 수 있는 방법은 페이지의 특정한 객체에게 이벤트를 지정하여 사용자가 그 이벤트로 동작하면 이벤트에 지정한 동작을 실행하는 것입니다. 이 때, 특정한 이벤트로 한 객체를 다룰려고 하면 그 객체가 페이지에 미리 출력되어 있어야 합니다. 그렇지 않으면 에러가 나게 됩니다. 그래서 다룰려고 하는 객체가 있는지 없는지 확인하고 다루어야 합니다.

이런 확인을 할 수 있는 방법이 확인할 객체를 if(객체) {}로 하는 것입니다. 객체가 있다면 if문의 구문을 수행하고 없다면 실행하지 않습니다. 이 방법은 에러예방 뿐만이 아니고 브라우저를 구분하는 방법으로도 많이 사용됩니다. 대표적인 경우가 아래의 경우일 것입니다.

if(document.layers) nn4 실행 구문
if(document.all) ie4 실행구문

HTML 을 브라우저가 출력하면 작성해 놓은 모든 택은 각 DOM에 지정된 구조로 지정됩니다. 페이지에 이미지가 한 개 있다면 그 이미지는 document.images[0] 인 DOM의 위치로 됩니다. 그래서 이 이미지가 있나없나 확인하기 위해서는 if(document.images[0])로 하면 확인할 수 있습니다.

한 페이지에서 어떤 동작을 하는 것은 비교적 간단하지만 프레임 페이지로 구성한 페이지에서 페이지 간에 동작 시키는 것은 다소 복잡합니다. 각 프레임에 가지고 있는 내용물에 따라서 출력되는 순서와 시간이 다르기 때문입니다.

두 페이지로 이루어진 프레임 페이지에서 두 페이지에 같은 내용물이 있는 아래의 프레임 페이지는

<frameset cols="50%, *" onLoad="alert('frameset')">
	<frame src="left.htm" name="L" onLoad="alert('left')">
	<frame src="right.htm" name="R" onLoad="alert('right')">
</frameset>

가장 끝에 나오는 alert 창은 'frameset'입니다. 그리고 "L" 프레임 페이지와 "R" 프레임은 브라우저에 따라서 나오는 순서가 다릅니다. 이것은 "L", "R" 페이지가 같은 크기의 내용물이 였을 때 나오는 순서이지만 각 페이지의 내용물의 크기가 다르면 또 달라집니다. 프레임으로 만든 페이지는 순서대로 출력하지 않고 한꺼번에 다 출력하기 때문입니다. 그래서 두 프레임 간에 페이지가 출력된 후에 어떤 일을 지정하기 위해서는 frameset 택의 onLoad 이벤트를 사용하여야 합니다.

근데 frameset에 지정한 onLoad 이벤트가 가끔 실행하지 않는 경우가 nn4에서 있었습니다. 위의 방식으로 작성한 페이지를 시험삼아 여러번 재출력하면 그랬습니다. 그래서 정상적인 작동을 하지 않는 경우가 있는데 이것을 해결하기 위해서는 다룰려고 하는 페이지가 다 출력될 때까지 반복적으로 실행하는 것입니다. 예를들면, 위의 right.htm 페이지에서 left.htm의 한 객체를 다룰려고 하면

<script>
function gg() {
	if(parent.L.객체) {
		parent.L.객체.요소 = 값
	}
	else setTimeout("gg()", 500)
}
</script>

<body onLoad="gg()">

으로 left.htm 페이지의 한 객체가 페이지에 출력이 되면 그 객체의 값을 수정하고 그렇지 않다면 다시 0.5초 후에 다시 확인을 합니다. 그래서 페이지 양에 따른 시간의 차이에 상관없이 프레임 페이지에서 다른 페이지를 다룰 수 있습니다.

--
오랜간만에 페이지를 추가 하네요.. 이 페이지는 별로 활용할 게 없어서 올리기 싫었는데 하도 추가한 페이지가 설렁해서 올립니다. 요즘은 C, ASP, LINUX, DB를 한꺼번에 공부한다고 외도를 해서 추가할 만한 게 잘 생각나지 않는군요..

좀 없을까요..? 추가할 만한 것....

그리고 대문 바꿀려고 생각하고 있습니다. 좋은 생각 있으시면 말해주세요..

T O P