[Javascript] iFrame src 변경 이벤트 감지?


Answers

JQuery를 기반으로 한 응답 <3

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

subharb에서 언급했듯이, JQuery 3.0에서와 같이이 속성을 다음과 같이 변경해야합니다.

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

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

Question

iframe의 내용을 제어 할 수 없다고 가정하면 부모 페이지를 통해 src 변경 사항을 감지 할 수있는 방법이 있습니까? 아마도 일종의 온로드일까요?

내 마지막 수단은 iframe src가 이전과 동일하지만 1 초 간격 테스트를 수행하는 것입니다. 그러나이 해킹 된 솔루션을 수행하는 것이 좋습니다.

도움이된다면 jQuery 라이브러리를 사용하고 있습니다.




다른 답변은 load 이벤트를 제안했지만 iframe의 새 페이지가로드 된 후에 발생합니다. 새 페이지가로드 된 후에가 아니라 URL 변경 직후에 알림을 받아야 할 수 있습니다.

다음은 일반적인 JavaScript 솔루션입니다.

function iframeURLChange(iframe, callback) {
    var unloadHandler = function () {
        // Timeout needed because the URL changes immediately after
        // the `unload` event is dispatched.
        setTimeout(function () {
            callback(iframe.contentWindow.location.href);
        }, 0);
    };

    function attachUnload() {
        // Remove the unloadHandler in case it was already attached.
        // Otherwise, the change will be dispatched twice.
        iframe.contentWindow.removeEventListener("unload", unloadHandler);
        iframe.contentWindow.addEventListener("unload", unloadHandler);
    }

    iframe.addEventListener("load", attachUnload);
    attachUnload();
}

iframeURLChange(document.getElementById("mainframe"), function (newURL) {
    console.log("URL changed:", newURL);
});
<iframe id="mainframe" src=""></iframe>

이렇게하면 src 속성 변경 사항과 iframe 자체에서 변경 한 URL을 성공적으로 추적 할 수 있습니다.

모든 최신 브라우저에서 테스트되었습니다.

참고 : 위의 스 니펫은 iframe의 원산지가 동일한 경우에만 작동합니다.

나는이 코드에 대한 gist 을 만들었다. 내 다른 answer 도 확인할 수 있습니다. 이것이 어떻게 작동하는지에 대해 좀 더 자세히 설명합니다.




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);
    }