iframe을 다시로드 / 새로 고치는 가장 좋은 방법은 무엇입니까?

<iframe>JavaScript를 사용하여 다시로드하고 싶습니다 . 지금까지 내가 찾은 가장 좋은 방법은 iframe의 src속성 자체 로 설정 되었지만 매우 깨끗하지는 않습니다. 어떤 아이디어?

document.getElementById('some_frame_id').contentWindow.location.reload();

Firefox에서는 window.frames[]id로 색인 할 수 없지만 이름 또는 색인으로 색인을 생성해야합니다.

document.getElementById('iframeid').src = document.getElementById('iframeid').src

iframe도메인 전체 에서을 다시로드 합니다! IE7 / 8, Firefox 및 Chrome에서 테스트되었습니다.

jQuery를 사용하는 경우 작동하는 것 같습니다.

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

나는 그것이 스택 오버 플로우에 너무 추악하지 않기를 바랍니다.

빈 공간을 추가하면 iFrame이 자동으로 다시로드됩니다.

document.getElementById('id').src += '';

window.frames['frameNameOrIndex'].location.reload();

때문에의 동일 출처 정책 다른 도메인에 iframe을 가리키는 수정할 때,이 작동하지 않습니다. 최신 브라우저를 타겟팅 할 수 있으면 HTML5의 문서 간 메시징 사용을 고려하십시오 . 이 기능을 지원하는 브라우저는 http://caniuse.com/#feat=x-doc-messaging 에서 볼 수 있습니다 .

HTML5 기능을 사용할 수없는 경우 http://softwareas.com/cross-domain-communication-with-iframes에 설명 된 트릭을 따를 수 있습니다 . 해당 블로그 항목은 문제를 정의하는데도 효과적입니다.

방금 크롬 에서이 문제를 해결했으며 iframe을 제거하고 교체하는 것이 유일한 방법이었습니다. 예:

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

꽤 간단하고 다른 답변에서는 다루지 않습니다.

새 URL

location.assign("http:google.com");

assign () 메소드는 새 문서를로드합니다.

새로 고침

location.reload();

reload () 메소드는 현재 문서를 다시로드하는 데 사용됩니다.

src새 페이지가로드 될 때까지 이전 내용을 볼 수 있기 때문에 iframe 요소 의 속성을 바꾸는 것만으로 는 만족스럽지 않았습니다. 즉각적인 시각적 피드백을 제공하려는 경우 더 효과적입니다.

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

yajra의 게시물에 대한 개선 ... 나는 생각을 좋아하지만 브라우저 감지의 아이디어를 싫어합니다.

브라우저 감지 대신 객체 감지 사용에 대한 ppk의 견해를 취합니다 ( http://www.quirksmode.org/js/support.html ). 실제로 브라우저의 기능을 테스트하고 그에 따라 행동하기 때문에 그 당시 브라우저가 할 수 있다고 생각하는 것. 또한 추악한 브라우저 ID 문자열 구문 분석이 필요하지 않으며 사용자가 모르는 완벽하게 작동하는 브라우저를 제외하지 않습니다.

따라서 navigator.AppName을 보는 대신 실제로 사용하는 요소를 테스트하면서 이와 같은 작업을 수행하지 않는 이유는 무엇입니까? (당신이 더 화려하게하고 싶다면 try {} 블록을 사용할 수 있지만 이것은 나를 위해 일했습니다.)

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

이런 식으로 자바 스크립트 오류를 ​​발생시키지 않고 원하는만큼이나 다른 순열을 시도하고 다른 모든 것이 실패 할 경우 현명한 작업을 수행 할 수 있습니다. 사용하기 전에 객체를 테스트하는 것이 조금 더 많은 작업이지만 IMO는 더 안전하고 더 안전한 코드를 만듭니다.

Windows의 IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) 및 Opera (12.0.2)에서 저에게 효과적이었습니다.

실제로 재로드 기능을 테스트하여 더 잘 할 수는 있지만 지금은 충분합니다. :)

이제 크롬 66 에서이 작업을 수행하려면 다음을 시도하십시오.

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}

.Net을 사용하는 IE8에서는 iframe.src처음으로 설정하는 것이 좋지만 iframe.src두 번째로 설정 page_load하면 iframed 페이지가 증가하지 않습니다 . 그것을 해결하기 위해 나는 사용했다 iframe.contentDocument.location.href = "NewUrl.htm".

jQuery thickBox를 사용하고 thickbox iframe에서 동일한 페이지를 다시 열려고하면 그것을 발견하십시오. 그런 다음 열린 이전 페이지를 표시했습니다.

IE에는 reload를 사용하고 다른 브라우저에는 src를 설정하십시오. IE 7,8,9 및 Firefox에서 테스트 한 (FF에서 재로드가 작동하지 않음)

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

Jquery를 사용하는 경우 한 줄 코드가 있습니다.

$('#iframeID',window.parent.document).attr('src',$('#iframeID',window.parent.document).attr('src'));

같은 부모와 함께 일하는 경우

$('#iframeID',parent.document).attr('src',$('#iframeID',parent.document).attr('src'));

위의 모든 방법이 효과가없는 경우 :

window.location.reload();

이것은 어떤 이유로 전체 스크립트 대신 내 iframe을 새로 고쳤습니다. 다른 프레임에서 프레임을 새로 고치려고 할 때 모든 getElemntById 솔루션이 작동하는 동안 프레임 자체에 배치 되었기 때문일 수 있습니다.

또는 나는 이것을 완전히 이해하지 못하고 횡설수설을합니다. 어쨌든 이것은 매력처럼 나를 위해 일했습니다 :)

의미없는 쿼리 문자열 매개 변수를 URL에 추가하는 것을 고려 했습니까?

<iframe src="myBaseURL.com/something/" />

<script>
var i = document.getElementsById("iframe")[0],
    src = i.src,
    number = 1;

//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>

안전하지 않은 매개 변수를 알고 있다면 괜찮습니다.

또 다른 해결책.

const frame = document.getElementById("my-iframe");

frame.parentNode.replaceChild(frame.cloneNode(), frame);

를 사용 self.location.reload()하면 iframe이 새로 고침됩니다.

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />

<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script> 

다른 제안을 모두 시도 했는데도 제대로 작동하지 않는 경우 (여러분이 할 수 없었던 것처럼) 여기 유용한 방법이 있습니다.

HTML

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

JS

$('.refresh-this-frame').click(function() {
    var thisIframe = $(this).attr('rel');
    var currentState = $(thisIframe).attr('src');
    function removeSrc() {
        $(thisIframe).attr('src', '');
    }
    setTimeout (removeSrc, 100);
    function replaceSrc() {
        $(thisIframe).attr('src', currentState);
    }
    setTimeout (replaceSrc, 200);
});

처음에는 RWD 및 크로스 브라우저 테스트로 시간을 절약하려고 노력했습니다. 나는 많은 iframe을 담은 빠른 페이지를 만들고 싶었고 원하는대로 표시하거나 숨길 그룹으로 구성했습니다. 논리적으로 주어진 프레임을 쉽고 빠르게 새로 고칠 수 있기를 원합니다.

현재 테스트중인이 테스트 베드에서 사용중인 프로젝트는 색인이 생성 된 위치가있는 한 페이지 사이트입니다 (예 : index.html # home). 그것은 특정 프레임을 새로 고칠 다른 솔루션을 얻을 수없는 이유와 관련이있을 수 있습니다.

나는 그것이 세상에서 가장 깨끗한 것이 아니라는 것을 알고 있지만 그것은 내 목적을 위해 작동합니다. 이것이 누군가를 돕기를 바랍니다. 이제 iframe 내부에 애니메이션이있을 때마다 iframe이 부모 페이지를 스크롤하지 못하게하는 방법을 알 수 있다면 ...

편집 : 나는 이것이 원하는 것처럼 iframe을 "새로 고치지 않는다"는 것을 깨달았습니다. 그래도 iframe의 초기 소스를 다시로드합니다. 여전히 다른 옵션을 사용할 수없는 이유를 여전히 알 수 없습니다.

업데이트 : 다른 방법으로 작동하지 않는 이유는 Chrome에서 테스트하고 있기 때문에 Chrome에서 iframe의 콘텐츠에 액세스 할 수 없기 때문입니다 (설명 : Chrome의 향후 릴리스가 contentWindow를 지원할 가능성이 있습니까? icontent 가 동일한 위치에서 시작되지 않은 경우 iframe이 로컬 html 파일에서 로컬 html 파일을로드 할 때 / contentDocument? ) 추가 테스트를 수행하면 FF의 contentWindow에도 액세스 할 수 없습니다.

수정 된 JS

$('.refresh-this-frame').click(function() {
    var targetID = $(this).attr('rel');
    var targetSrc = $(targetID).attr('src');
    var cleanID = targetID.replace("#","");     
    var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
    var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );      
    if (chromeTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }
    if (FFTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }       
    if (chromeTest == false && FFTest == false) {
        var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc2() {
            $(targetID).attr('src', targetLoc);
        }
        setTimeout (replaceSrc2, 200);
    }
});

디버깅을 위해 콘솔을 열고 실행 컨텍스트를 새로 고치려는 프레임으로 변경하고 수행 할 수 있습니다 document.location.reload()