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)
ポール・A Jungwirth

3
参考までに-現在(2013年1月現在)Chromiumプロジェクトのバグ(code.google.com/p/chromium/issues/detail?id=172859)があり、iframeの更新によりドキュメントの履歴に追加されます。
Robert Altman 2013

iFrameでページを変更すると、このメソッドはナビゲーションを失います
Eduardo Cuomo 2013年

10
var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src;
2015年

2
Chromeで私のために、この完璧な作業document.getElementById('frame_id').contentDocument.location.reload(true);
ハシーブズルフィカール

104

これは役立つはずです:

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

編集:@Joroのコメントに従ってオブジェクト名を修正しました。


3
これはIE9では機能しません。contentDocumentの代わりにcontentWindowを使用する必要があります。
gotqn 2012

1
答えてくれてありがとう。また、あなたは積極的に、その後のiframe内の別の別のページへのリフレッシュを引き起こす必要があります代わりにした場合reload(true)、あなたは、この使用します。document.getElementById('FrameID').contentWindow.location.replace(new_url);
racl101

15
これは、発信元(プロトコル、ホスト名、ポート)が異なるiframeでは機能しません。
michelpm 2015

18

iframeが同じドメインから読み込まれている場合、これを行うことができますが、これは少し意味があります。

iframe.contentWindow.location.reload();


4

あなたはこの簡単な方法を使うことができます

function reloadFrame(iFrame) {

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

}



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、2015年

Math.round()は何をしますか?ここではまったく役に立たないようです。
Davide R.

こんにちはMath.round()を使用しました。ブラウザによってはURLをキャッシュできるため、ページが更新されないためです。
FerhatKOÇER2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.