jQuery frameset 접근 (부재 : ready와 onload의 차이)

이제는 제법 가을날씨가 느껴집니다.

바람도 선선하게 부는게 저녁에 에어컨 없이도 잠들수 있어 너무 좋네요 :D

이번 포스팅의 주제는 크게 두가지가 될것 같습니다.

1. jQuery로 frameset의 frame에 접근하기 (셀렉터)

2. jQuery의 ready()와 자바스크립트의 onload 차이점

<frameset id="frameset">
	<frame name="A" src="./test.jsp">
	<frame name="B" src="">
</frameset>

먼저 1번 주제에 대한 내용입니다.

개발중 이런 구조로 되어있는 최상위 부모 페이지에서 frameset 내부의 frame( A )에 접근해야하는데 안되는겁니다.

$("#add_btn", frames[0].document);
$(window.frames["A"].document).find('#add_btn');

 

셀렉터는 이런식으로 사용했었습니다.

분명 올바른 셀렉터인데 왜 선택이 안될까나..고민도해보고 나름 긴 시간동안 구글링도 했습니다. :(

 웹에서도 대부분 저런식으로 사용하면된다고 답변되어있어서 더 혼란이 왔습니다.

차근 차근 생각해보다가 문득 떠오른것이 있었습니다.

바로 로딩시간.

셀렉터도 올바르고, 개발자도구에서 직접 입력하여 셀렉트해봐도 잘 잡히는데 구지 안잡히는 이유가 있었습니다.

$(document).ready(function(){
	$("#add_btn", frames[0].document);
});

위치를 jQuery ready()에 넣어서 사용했었는데요.

이렇게되면 메인페이지의 리소스가 모두 받아지기 전에 이벤트가 발생되기 때문에 안됬었습니다.

결국 안된 순서를 나열해보면.

1. 페이지가 열리면서 모든 리소스가 받아지기 전에 ready()가 실행되어 엘리먼트를 셀렉트한다.

2. frameset > frame( A )문서가 완전히 로드되기전에 셀렉트하였다.

3. 따라서 찾지못한다.

정도가 되겠네요.

window.onload = function(){
	$("#add_btn", frames[0].document);
};

 그래서 함수를 바꿔서 사용하니 매우 잘 잡힙니다.

추가적으로 jQuery의 ready()와 자바스크립트의 onload의  설명을 하겠습니다.

jQuery의 ready()함수 같은경우는 웹문서의 DOM이 생성완료되면 호출됩니다.

따라서 리소스 (이미지, 음악파일 등)가 받아지기 전에 호출되게 됩니다.

쉽게 생각해서

페이지요청 -> 엘리먼트생성(여기서 실행) -> 리소스다운 -> 페이지로드완료

순서가 된다고 보시면 됩니다.

다음 자바스크립트의 onload 같은경우는 모든 리소스까지 로드되었을때 실행됩니다.

페이지요청 -> 엘리먼트생성 -> 리소스다운 -> 페이지로드완료(여기서 실행)

이런 순서가 되겠습니다.

결국 이번 문제의 핵심을 다시한번 풀어보자면.

frame들이 모두 로드가 된 상태에서 해당 문서내의 DOM을 셀렉트 해야하는데,

로딩이 되지않은 시점에 셀렉트하였기에 찾지 못하는 현상이었습니다.

요즘 프레임을 사용하는 사이트를 많이 보지 못했는데

혹시라도 같은 문제가 생기신분들은 도움이 될법한 내용같습니다.

부재로 쓰인 jQuery의 ready() 함수와 자바스크립트 onload() 함수의 차이점또한 인지해놓는 편이 좋구요.

종종 이런일이 일어나는데, 이런정보를 본적이 없을 당시 매우 해맨 기억이 있거든요 :D