[javascript]아이프레임 높이 동적 변경2(스크롤 위치 문제 해결 정독 안하면 후회.크로싱브라우징 해결.)

지난번 포스팅때 아이프레임 동적 높이 변경에 다룬적이 있는데 잘못된 부분이 있어 다시 포스팅을 한다.


지난번에

function sendFrameSize(){

    if (typeof window.parent.resizeIFrame == "function") {
window.parent.resizeIFrame($("body").prop("scrollHeight"));
}
}

function sendFrameInitSize(size){
if (typeof window.parent.resizeIFrame == "function") {
       window.parent.resizeIFrame(size);
}
}

아이프레임내 에서 문서가 로드된후 부모 프레임의 높이 변경 함수를 호출 하는 식으로 했었는데 약간의 문제가 있었다.

예를 들면 아이프레임 내에서 더보기등 기타 이벤트에 의해 높이값이 변경 되었을때
스크롤값이 다시 올라가버리는 바람에 문서 아래부분 내용을 보기 위해선 스크롤을 한없이 해야했다.

삽질끝에 크로스 브라우징 되는 최적화 코드 가 나왔다 ㅎㅎㅎ


일단 메인 페이지에서

자바 스크립트 아래 함수를 정의한다.

//현재 스크롤 x,y 좌표를 반환한다. (크롬익스정상, 일부 브라우저에서 안될수 있음)
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
}else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
}else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}//스크롤바 위치 알아내기

//아이프레임 동적 높이 변경
function resizeMainFrame(){

var xyposition =  getScrollXY();
var xPosition = xyposition[1];
document.getElementById('mainframe').height = "0px";
var iframeHeight=             document.getElementById('mainframe').contentWindow.document.body.scrollHeight;
document.getElementById('mainframe').height=iframeHeight;

if(arguments.length > 0 && xPosition > 0){
window.scrollTo(0,xPosition);
}else{
window.scrollTo(0,0);
}
}

html부분.

(src="<%=linkUrl %>" 이부분은 요청 URL 정보가 있을경우 로드하게끔 하는부분이니
신경쓰지 않아도 된다. 또한 높이 값을 주석처리 해도 무방하다.)


<iframe src="<%=linkUrl %>" onload="javascritp:resizeMainFrame();" id="mainframe" frameborder="0" scrolling="no" style="width: 956px;/* height: 958px; */">

아이프레임이 로드 되면 resizeMainFrame(); 함수를 호출 한다.
resizeMainFrame 은 getScrollXY() 에서 부터 현재 스크롤 높이 값을 얻는다
document.getElementById('mainframe').height = "0px"; 코드에서 아이프레임 높이를
0px 로 초기화 한다 (초기화 하지 않을경우 변경된 프레임 높이값이 전달안됨)

이로써 아이프레임 높이 값은 변경되었다 이제 스크롤.


자식 프레임 공통 스크립트

function sendFrameSize(){

        //부모창이 없을경우 오류가 나기 때문에 조건처리
if (typeof window.parent.resizeMainFrame == "function") {
                //resizeMainFrame 함수를 호출 하면서 href 문자열을 넘김
window.parent.resizeMainFrame("href");
}
}
//문서가 다 로드된후 호출 (자식 문서 높이가 변경되었을때도 sendFrameSize() 호출함.)
$(document).ready(function(){

   sendFrameSize()

});

자식프레임 문서가 다 로드 되면 sendFrameSize() 함수를 호출 하고
sendFrameSize() 함수는 부모의 resizeMainFrame() 를 호출 하면서 href 라는 문자열을 전달한다.

자바스크립트 전역으로 쓰이는 arguments 객체에는 전달된 파라미터가 있을경우 length
값이 증가 한다. (자세한건 따로 검색)

결국 자식 프레임 에서 아이프레임 url을 변경 할때도
부모프레임에서 아이프레임 을 로드 할때도 동일한
resizeMainFrame() 함수를 호출 하게된다.

그럼 이제 스크롤 위치 값을 셋팅 할 차례

if(arguments.length > 0 && xPosition > 0)

arguments.length > 0 는 즉 자식으로 부터 호출 되었음을 체크
xPosition > 0 스크롤 값이 내려간것을 체크

즉 자식프레임 내에서 더보기 나 다른 특정이벤트로 인해 문서 높이가 증가했을때
부모프레임에서

var xPosition = xyposition[1]; 로 저장 해놨던 현재 스크롤 높이 값을

window.scrollTo(0,xPosition);  으로 셋팅한다.

그외에 경우는

window.scrollTo(0,0);  스크롤을 최상단위치 시킴.


자식프레임에서 문서 높이가 증가는 액션후 sendFrameSize() 만 호출 해주면
문제 해결.

4시간 삽질 했음.. 댓글좀 부탁해요~~