web-dev-qa-db-ja.com

Javascriptを使用してIFrameを更新する方法は？

IFrameとButtonのあるWebページがあり、ボタンが押されたらIFrameを更新する必要があります。もしそうなら、これは可能ですか？私は検索しましたが、答えが見つかりませんでした。

javascriptiframe
105
Roland
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
122
kjagiello

これは役立つはずです：

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

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

95
nfechner

iframeが同じドメインからロードされている場合、これを行うことができます。これはもう少し理にかなっています。

iframe.contentWindow.location.reload();
13
Horia Dragomir

IE、Mozzila、Chromeに対応

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

この簡単な方法を使用できます

function reloadFrame(iFrame) {

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

}
4
Vasile Alexandru Peste

これを here から取得しました

var f = document.getElementById('iframe1');
f.src = f.src;
2
Amarghosh

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
Tony

2017年：

同じドメインにある場合：

iframe.contentWindow.location.reload();

働くでしょう。

1
pery mimon

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
lcharbon

ハッシュの切り替え時にフレームを更新しない可能性があるハッシュパス（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がフレームの置き換えを試みる場合があります（したがって、古いコンテンツの読み込み）。回避策はまだわかりません。

1
NotoriousPyro

ページ内に複数の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
sarvesh singh

IframeのURLが変わらない場合は、再作成できます。

Iframeが同じOrigin（プロトコルスキーム、ホスト名、ポート）からのものではない場合、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);
0
michelpm