Javascript를 사용하여 IFrame을 새로 고치는 방법은 무엇입니까?


답변:


152
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;

2
이 버전의 Chrome에서 작동합니다.Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1)
Paul A Jungwirth 2013 년

3
참고-현재 (2013 년 1 월 현재) iframe 업데이트가 문서 기록에 추가되도록 하는 Chromium 프로젝트 버그 ( code.google.com/p/chromium/issues/detail?id=172859 )가 있습니다.
Robert Altman

iFrame으로 페이지를 변경하면이 방법은 탐색을 잃었습니다
Eduardo Cuomo

10
var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src;
lyfing

2
크롬에서 나를 위해이 완벽하게 작동document.getElementById('frame_id').contentDocument.location.reload(true);
Haseeb Zulfiqar

104

이것은 도움이 될 것입니다 :

document.getElementById('FrameID').contentWindow.location.reload(true);

편집 : @Joro의 설명에 따라 개체 이름을 수정했습니다.


3
이것은 IE9에서 작동하지 않습니다. contentDocument 대신 contentWindow를 사용해야합니다.
gotqn

1
답변 해주셔서 감사합니다. 또한 iframe 내에서 다른 페이지를 다른 페이지로 새로 고쳐야하는 경우 대신 다음 reload(true)을 사용합니다.document.getElementById('FrameID').contentWindow.location.replace(new_url);
racl101

15
출처 (프로토콜, 호스트 이름 또는 포트)가 다른 iframe에서는 작동하지 않습니다.
michelpm 2015

18

iframe이 동일한 도메인에서로드되는 경우이 작업을 수행 할 수 있습니다.

iframe.contentWindow.location.reload();

7

IE, Mozzila, Chrome에서 작동

document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);



2

2017 :

동일한 도메인에있는 경우 :

iframe.contentWindow.location.reload();

작동합니다.


1

다음은 HTML 스 니펫입니다.

<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>

그리고 내 Javascript 코드 :

window.onload = function(){
setInterval(function(){
    parent.frames['idFrame'].location.href = "chat.txt";
},1000);}

1

src 속성을 직접 재설정 :

iframe.src = iframe.src;

캐시 무효화를위한 타임 스탬프로 src 재설정 :

iframe.src =  iframe.src.split("?")[0] + "?_=" + new Date().getTime();

쿼리 문자열 옵션이 불가능할 때 src 지우기 (데이터 URI) :

var wasSrc = iframe.src

iframe.onload = function() {
    iframe.onload = undefined;
    iframe.src = wasSrc;
}

1

해시 전환시 프레임을 새로 고칠 수없는 해시 경로 (예 : mywebsite.com/#/my/url)를 사용하는 경우 :

<script>
    window.onhashchange = function () {
        window.setTimeout(function () {
            let frame = document.getElementById('myFrame');
            if (frame !== null) {frame.replaceWith(frame);}
        }, 1000);
    }
</script>

안타깝게도 시간 제한을 사용하지 않으면 JS는 페이지가 콘텐츠로드를 완료하기 전에 프레임을 교체하려고 시도 할 수 있습니다 (따라서 이전 콘텐츠로드). 아직 해결 방법이 확실하지 않습니다.


0

페이지 내에 여러 iFrame이있는 경우이 스크립트가 유용 할 수 있습니다. 특정 iFrame을 찾는 데 사용할 수있는 iFrame 소스에 특정 값이 있다고 가정합니다.

var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
    var source =  iframes[i].attributes.src.nodeValue;
    if(source.indexOf('/yourSorce') > -1){
        yourIframe = iframes[i];
    }   
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;

"/ yourSource"를 필요한 값으로 바꾸십시오.


0

iframe의 URL이 변경되지 않으면 다시 만들 수 있습니다.

iframe이 동일한 출처 (프로토콜 체계, 호스트 이름 및 포트)가 아닌 경우 iframe의 현재 URL을 알 수 없으므로 상위 창과 메시지를 교환하려면 iframe 문서에 스크립트가 필요합니다 ( 페이지의 창).

iframe 문서에서 :

window.addEventListener('change', function(e) {
  if (e.data === 'Please reload yourself') {
    var skipCache = true; // true === Shift+F5
    window.location.reload(skipCache);
  }
}

페이지에서 :

var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);

-2

이것을 사용할 수 있습니다 :

Js :

function refreshFrame(){
    $('#myFrame').attr('src', "http://blablab.com?v=");
}

HTML :

`<iframe id="myFrame" src=""></iframe>`

JS 바이올린 : https://jsfiddle.net/wpb20vzx/


1
이 질문은 jQuery라는 인기있는 JavaScript 라이브러리 와 관련이 없습니다 .
John Weisz

Math.round ()는 무엇을할까요? 여기에서는 완전히 쓸모없는 것 같습니다.
Davide R.

안녕하세요 일부 브라우저는 Url을 캐시 할 수 있기 때문에 Math.round ()를 사용했습니다. 페이지 새로 고침이 작동하지 않습니다.
Ferhat KOÇER
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.