2013. 11. 18.

JQUERY iframe 또는 팝업창에서 부모 엘리먼트 참조하기.

팝업창이나 한 페이지에서 iframe을 이용해서 다른 페이지를 불러 왔을때 부모의 엘리먼트 값을 참조하거나 바꿔줘야 하는 경우가 있습니다.

팝업창의 경우에 window.opener.함수(매개변수, ...); 와 같이 부모가 가지고 있는 함수를 호출하면서 필요한 인자를 넘겨 부모측에서 처리하게 하면 되고, iframe의 경우엔 window.parent.함수(매개변수,  ...); 처럼 parent를 호출해서 처리하면 됩니다.

뭐 그리 대단한 연산이 있는 것도 아닌데, 자식 창에서 처리해서 부모 창에 반영 되게 하려고 바꾸려던 찰나에 꼭 jquery 문장으로 쓰고 싶다는 생각이 듭니다. 코딩 하다보면 효율이고 나발이고 왠지 싫은게 있고 꼭 이렇게 하고 싶을 때가 생기더라구요. 허허.

JQUERY로 저 문장을 어떻게 바꾸면 좋을까...
$("# ID " ).val( ... ); 이렇게 적어놓고 어떻게 부모창의 엘리먼트에 접근 해야 하나 찾아 봤습니다.
http://stackoverflow.com/questions/726816/how-to-write-this-in-jquery-window-parent-document-getelementbyidparentprice

window.parent.document.getElementById(' ID ').innerHTML 
$('#ID', window.parent.document).html(); //JQUERY :-D

오호라. jquery selector 셀렉터 두번째 인자로 엘리먼트를 찾을 범위(?)를 줄 수 있다는 걸 알았네요. 만족스러운 검색을 마치고 적용해 보았습니다만 말을 듣지 않네요. 또 이리 저리 찾아 보다가...
http://stackoverflow.com/questions/2167455/how-to-access-parent-window-object-using-jquery

window.opener.$("#ID") ...

window객체의 parent는 iframe에서, opener는 팝업창에서 사용 합니다. opener를 parent로 바꿔 봅니다. IE, Chrome에서 잘 돌아 갑니다만... 마음에 들지 않습니다... 처음 찾은 저 코드가 왜 안되는지 마냥 궁금합니다. 그리고 괜히 변태같은 고집이 피어 오르네요. 일단 일은 해야되니 미뤄 놓고 시간 날때 틈틈히 찾아 봤습니다.
http://stackoverflow.com/questions/1133276/how-to-access-parent-document-elements-using-jquery-in-firefox

셀렉터에 파라미터를 2개 사용하는 문장에 대한 질문이고, IE와 Chrome에선 말을 듣지 않으나 firefox에서는 된다고 합니다. 만약 firefox에서 된다면 빌어먹을 브라우저 때문이군! 이렇게 생각하며 접어 버릴 생각으로 firefox를 깔아 봅니다. 그리고 확인해 봅니다! 안됩니다... :-O

http://stackoverflow.com/questions/9031031/jquery-selector-context
좀 더 뒤적거리다가 결국 포기 합니다. 마지막 링크에선 이런 글이 있네요.

so $('span', this) is equivalent to $(this).find('span').

으으음. 셀렉터에서 두번째 파라미터를 줘봤자 내부적으로는 find() 함수를 위와 같이 써서 처리 한답니다. 그래서 $(window.parent.document).find("#ID")... 로 변경해봤으나! 여전히 안됩니다.

* jquery 라이브러리 버전이 문젠가 싶어서 바꿔봤으나 실망만... 아아. 이번 변태같은 고집은 꺾을 수 밖에 없네요... 누가 아신다면 가르쳐 주세요...

댓글 3개 :

  1. iframe 은 $("SELECTOR", parent.document) 와 같이 접근해 보세요~

    답글삭제
    답글
    1. 두번째 파라미터 context의 값으로
      window.parent
      window.parent.document
      window.parent.document.body
      parent.document
      parent.doument.body ...
      온갖 조합을 갖다 넣어봤는데 저 방식으론 안되네요...

      window.parent.$('#ID') 방식으로 결국 사용하고 있습니다. ㅜ_ㅜ
      답변 감사합니다.

      삭제
  2. A 페이지에서 B 페이지를 레이어 div 안에 iframe으로 부르고

    A 페이지에서 불러진 B 페이지의 본문을 클릭하면 div 에서 display를 none으로 만들어 감출려고하는 jquery를 찾다가 여기까지 왔네요..

    결국 우여 곡절 끝에 저는...

    $('#A페이지에서 불러온 레이어(iframe이 있는..)', parent.document).css({ 'display':'none' });

    이렇게 해결을 했어요..

    주인장님을 포함한 지나가는 모든 사람에게 도움이 되길...

    답글삭제