jquery를 사용하여 iFrame 상위 페이지에 액세스하는 방법은 무엇입니까?


267

iframe이 있고 부모 요소에 액세스하기 위해 다음 코드를 구현했습니다.

window.parent.document.getElementById('parentPrice').innerHTML

jquery를 사용하여 동일한 결과를 얻는 방법?
업데이트 : 또는 jquery를 사용하여 iFrame 상위 페이지에 액세스하는 방법은 무엇입니까?


답변:


489

iFrame의 부모에서 찾으려면 다음을 사용하십시오.

$('#parentPrice', window.parent.document).html();

$ () 랩퍼의 두 번째 매개 변수는 검색 할 컨텍스트입니다. 기본적으로 문서입니다.


18
쿨-당신이 감사하기 전에 감사를 인정했다. 시간대에 문제가 있습니까?
belugabob

21
당신은 또한 할 수 있습니다 : $ (window.parent.document) .find ( "# parentPrice"). html ();
jhorback

@belugabob 위자드의 잘못입니다.
Erik Escobedo

1
window.open을 사용하여 windoid를 시작한 사용자는 이전 JS 표준 window.opener.document를 잊지 마십시오. $ ( "# someDiv", window.opener.document) 작동합니다.
jjohn

2
이것은 iframe의 소스에 jQuery가로드 된 경우에만 작동합니다. 내 경험상 iframe 소스에는 jQuery가 없지만 부모의 jQuery 함수 중 하나를 호출 해야하는 경우가 종종 있습니다. 이렇게하려면 : window.document. $ ( "# parentPrice"). html () Álvaro G. Vicario가 게시 한 답변입니다.
David Kinkead

39

jquery를 사용하여 iFrame 상위 페이지에 액세스하는 방법

window.parent.document.

jQuery는 JavaScript를 대체하는 라이브러리가 아닌 JavaScript 위에있는 라이브러리입니다. 모든 마지막 JavaScript 표현식을 $와 관련된 것으로 바꿀 필요는 없습니다.


6
+1. jQuery는 훌륭하지만 간단한 문제에 대한 많은 답변은 'jQuery 사용'인 것 같습니다. 어쨌든 라이브러리를로드하는 경우 괜찮지 만 하나의 작업을로드하지 마십시오. 또한 사람들은 JS 성능에 대해 염려 한 다음 API를 사용하지 않고 쉽게 가능하고 더 빠른 작업을 수행하기 위해 JS 위에 API를 사용합니다.
Grant Wagner

1
@Grant jQuery가 브라우저 내에서 네이티브 코드가되는 것을 꿈꾸지 만.
Dan Blow

3
@Blowski : 그게 내 악몽이야! jQuery에는 공식 API에 넣는 데 부적합한 매우 복잡하고 취약한 "무엇을 의미합니까?"코드가 많이 포함되어 있습니다.
bobince

1
@bobince : 분명히 모든 자바 스크립트를 항상 jQuery로 바꿔야합니다. 베이컨과 같습니다. 적은 것이 더 나은 상황은 없습니다. ;)
MW.

2
OP에는 이미 window.parent.document가 있었으므로 아무것도 대답하지 않았습니다. 그리고 선택기 로직이 요소의 ID보다 훨씬 더 복잡하다는 것을 상상해보십시오. jQuery가 대단한 상황입니다. 질문은 "프랑스어로 '안녕하세요'라고 어떻게 말합니까?" 이 답변은 "독일어"입니다.
grantwparks

13

상위 문서에서 jQuery 인스턴스를 찾아야하는 경우 (예 : 플러그인이 제공하는 유틸리티 함수 호출) 다음 구문 중 하나를 사용하십시오.

  • window.parent.$
  • window.parent.jQuery

예:

window.parent.$.modal.close();

jQuery가 window객체에 연결되고 이것이 무엇입니까 window.parent.


사용자 컨트롤처럼 iframe을 사용하고 있습니다. 이렇게하면 깔끔하고 깨끗하게 유지할 수 있습니다.
Dan Randolph

11

다음 window.parent과 같이 iframe 내에서 부모 창의 요소에 액세스 할 수 있습니다 .

// using jquery    
window.parent.$("#element_id");

다음과 같습니다.

// pure javascript
window.parent.document.getElementById("element_id");

중첩 된 iframe이 둘 이상 있고 최상위 iframe에 액세스하려는 경우 다음 window.top과 같이 사용할 수 있습니다 .

// using jquery
window.top.$("#element_id");

다음과 같습니다.

// pure javascript
window.top.document.getElementById("element_id");

7

부모 창에서 :

<script>
function ifDoneChildFrame(val)
{
   $('#parentPrice').html(val);
}
</script>

그리고 iframe src 파일에 넣으십시오 :

<script>window.parent.ifDoneChildFrame('Your value here');</script>

5

네, 저에게도 효과가 있습니다.

참고 : window.parent.document를 사용해야합니다.

    $("button", window.parent.document).click(function()
    {
        alert("Functionality defined by def");
    });

5

약간의 왜곡으로 나를 위해 일하고 있습니다. 필자의 경우 POPUP JS에서 PARENT WINDOW 양식으로 값을 채워야합니다.

그래서 나는 사용했다 $('#ee_id',window.opener.document).val(eeID);

우수한!!!


3

여기서 게임에 약간 늦을 수도 있지만 방금이 환상적인 jQuery 플러그인 https://github.com/mkdynamic/jquery-popupwindow를 발견했습니다 . 기본적으로 onUnload 콜백 이벤트를 사용하므로 기본적으로 자식 창 닫기를 수신하고 그 시점에서 필요한 작업을 수행합니다. 따라서 자식 창에 JS를 작성하여 부모에게 다시 전달할 필요가 없습니다.


1

여러 가지 방법이 있습니다.

I) 주 부모님에게 직접 연락하십시오.

엑사. 내 자식 페이지를 iframe으로 바꾸고 싶습니다.

var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);

여기 top.location 은 부모를 직접 가져 옵니다 .

II) 부모를 하나씩 구하십시오.

var element = $('.iframe:visible', window.parent.document);

여기에 하나 이상의 iframe이있는 경우 활성 또는 표시 가능한 하나를 지정하십시오.

부모님을 더 얻으려면 이런 식으로 할 수 있습니다.

var masterParent = element.parent().parent().parent()

III) 식별자로 부모를 얻는다.

var myWindow = window.top.$("#Identifier")
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.