[JQUERY] iframe이 SRC 변경 이벤트 감지?

iframe이 SRC 변경 이벤트 감지?

해결법

1. ---

   1.다음 예에서와 같이, onLoad 이벤트를 사용할 수 있습니다 :

   다음 예에서와 같이, onLoad 이벤트를 사용할 수 있습니다 :

   <iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>
   

   경고 팝업됩니다 iframe이 내 위치가 변경 될 때마다. 그것은 모든 현대적인 브라우저에서 작동하지만, IE5 초기 오페라와 같은 아주 오래된 브라우저에서 작동하지 않을 수 있습니다. (출처)

   iframe이 부모의 동일한 도메인 내에서 페이지를 표시하는 경우, 다음 예에서와 같이, contentWindow.location와 위치에 액세스 할 수있을 것입니다 :

   <iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>
   

2. ---

   2.JQuery와 <3에 따라 답변

   JQuery와 <3에 따라 답변

   $('#iframeid').load(function(){
       alert('frame has (re)loaded');
   });
   

   JQuery와 3.0로, subharb에서 언급 한 바와 같이이 변경 될 필요가있다 :

   $('#iframe').on('load', function() {
       alert('frame has (re)loaded ');
   });
   

   https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

3. ---

   3.이 페이지 통제 할 수없는 변화의 어떤 종류를 감시하려면 현대 방법은 MutationObserver을 사용하는 것입니다 다음

   이 페이지 통제 할 수없는 변화의 어떤 종류를 감시하려면 현대 방법은 MutationObserver을 사용하는 것입니다 다음

   src 속성에 대한보고 그것의 사용의 예는, iframe이의 변경

   새로운 MutationObserver (기능 (돌연변이) { mutations.some (기능 (돌연변이) { {(mutation.type은 === '속성'&& mutation.attributeName === 'SRC') 경우 CONSOLE.LOG (돌연변이); 을 console.log ( '올드 SRC :'mutation.oldValue); 을 console.log ( '새 SRC :'mutation.target.src); true를 반환; } false를 반환; }); }). {(는 document.body 관찰 속성 : 사실, attributeFilter : [ 'SRC'], attributeOldValue : 사실, CharacterData를 : 거짓, characterDataOldValue : 거짓, childList : 거짓, 하위 트리 : 사실 }); 에서는 setTimeout (함수 () { document.getElementsByTagName ( 'iframe이') [0]가 .src = 'http://jsfiddle.net/'; }, 3000); 해당

   삼초 후 출력

   MutationRecord {oldValue: "http://www.google.com", attributeNamespace: null, attributeName: "src", nextSibling: null, previousSibling: null…}
   Old src:  http://www.google.com
   New src:  http://jsfiddle.net/ 
   

   jsFiddle에

   원래의 질문이 하나의 중복으로 폐쇄되었다 여기에 대답을 게시 됨.

4. ---

   4.참고 : iframe이이 같은 원점 경우 조각에만 작동합니다.

   참고 : iframe이이 같은 원점 경우 조각에만 작동합니다.

   다른 답변은로드 이벤트를 제안하지만, iframe이있는 새 페이지가로드 된 후에는 발생합니다. 당신은 URL이 새 페이지가로드되지 후, 변경 후 즉시 통보해야합니다.

   다음은 일반 자바 스크립트 솔루션입니다 :

   함수 iframeURLChange (iframe이 콜백) { VAR unloadHandler = 함수 () { URL이 후 즉시 변경되기 때문에 // 타임 아웃이 필요 //은`unload` 이벤트가 전달됩니다. 에서는 setTimeout (함수 () { 콜백 (iframe.contentWindow.location.href); }, 0); }; attachUnload 함수 () { 이미 부착 된 경우에 unloadHandler를 제거 //. // 그렇지 않으면, 변화는 두 번 파견됩니다. iframe.contentWindow.removeEventListener ( "언로드", unloadHandler); iframe.contentWindow.addEventListener ( "언로드", unloadHandler); } iframe.addEventListener ( "부하"attachUnload); attachUnload (); } iframeURLChange (document.getElementById를 ( "메인") 함수 (NEWURL) { 을 console.log ( "URL 변경 :"NEWURL); }); 해당

   어떤 URL이 iframe이 자체 내에서 만든 변화와 같은이 성공적으로뿐만 아니라, src 속성 변경 사항을 추적합니다.

   모든 최신 브라우저에서 테스트.

   나뿐만 아니라이 코드와 요점을했다. 당신도 내 다른 대답을 확인할 수 있습니다. 그것은 어떻게이 작품에 깊이있는 조금 간다.

5. ---

   5.iframe이 항상 상위 페이지를 유지, 당신은 iframe에있는 페이지에서 검색하려면이 옵션을 사용한다 :

   iframe이 항상 상위 페이지를 유지, 당신은 iframe에있는 페이지에서 검색하려면이 옵션을 사용한다 :

   HTML 코드 :

   <iframe id="iframe" frameborder="0" scrolling="no" onload="resizeIframe(this)" width="100%" src="www.google.com"></iframe>
   

   JS :

       function resizeIframe(obj) {
           alert(obj.contentWindow.location.pathname);
       }
   

6. ---

   6.jQuery를 버전 3.0 이후 오류를 얻을 수 있습니다

   jQuery를 버전 3.0 이후 오류를 얻을 수 있습니다

   쉽게 수행하여 해결할 수있는

   $('#iframe').on('load', function() {
       alert('frame has (re)loaded ');
   });
   

7. ---

   7.여기 상거래 Sagepay를 기본적으로 제 1의 로딩하여 이전 값 후 자신은 iframe 외부 하나 document.location.href 비교 상거래 Paypoint 드루팔 모듈에서 사용되는 방법이다.

   여기 상거래 Sagepay를 기본적으로 제 1의 로딩하여 이전 값 후 자신은 iframe 외부 하나 document.location.href 비교 상거래 Paypoint 드루팔 모듈에서 사용되는 방법이다.

   그래서 기본적 아이디어는 자신의 JS 코드와 숨겨진 양식 자리 표시로 빈 페이지를로드하는 것입니다. 그런 다음 부모 JS 코드는 숨겨진 양식을 제출 곳에 외부 iframe을 자사 #action 포인트. 리디렉션이 / 제출이 발생하면, 여전히 해당 페이지에서 실행되는 JS 코드는 document.location.href 값의 변경 사항을 추적 할 수 있습니다.

   여기 JS가 iframe에 사용 예이다 :

   ;(function($) {
     Drupal.behaviors.commercePayPointIFrame = {
       attach: function (context, settings) {
         if (top.location != location) {
           $('html').hide();
           top.location.href = document.location.href;
         }
       }
     }
   })(jQuery);
   

   그리고 여기 JS 부모 페이지에서 사용할 수 있습니다 :

   ;(function($) {
     /**
      * Automatically submit the hidden form that points to the iframe.
      */
     Drupal.behaviors.commercePayPoint = {
       attach: function (context, settings) {
         $('div.payment-redirect-form form', context).submit();
         $('div.payment-redirect-form #edit-submit', context).hide();
         $('div.payment-redirect-form .checkout-help', context).hide();
       }
     }
   })(jQuery);
   

   그런 다음 임시 빈의 방문 페이지에서 당신은 외부 페이지로 리디렉션됩니다 양식을 포함해야합니다.

from https://stackoverflow.com/questions/2429045/iframe-src-change-event-detection by cc-by-sa and MIT license