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

このようにして、JavaScriptエラーを発生させることなく、必要に応じて、または必要なだけ多くの異なる順列を試し、他のすべてが失敗した場合に賢明なことを行うことができます。オブジェクトを使用する前にテストするのは少し手間がかかりますが、IMOの方がフェイルセーフコードを改善できます。

Windows上のIE8、Firefox（15.0.1）、Chrome（21.0.1180.89 m）、Opera（12.0.2）で私のために働いた。

リロード機能を実際にテストすることで、もっとうまくできるかもしれませんが、今はそれで十分です。:)

これをChrome 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ても問題ありませんが、2回目にを設定してpage_loadも、iframeされたページのは発生しません。それを解決するために私は使用しましたiframe.contentDocument.location.href = "NewUrl.htm"。

jQuery thickBoxを使用して、thickbox iframeで同じページを再度開こうとしたときにそれを発見してください。次に、開かれた前のページが表示されました。

IEにreloadを使用し、他のブラウザーにsrcを設定します。（FFではリロードは機能しません）IE 7,8,9およびFirefoxでテスト済み

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を使用する場合、1行のコードがあります。

$('#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をまとめたクイックページを作成し、グループにまとめて自由に表示/非表示にします。論理的には、任意のフレームを簡単かつ迅速に更新できる必要があります。

私が現在取り組んでいるプロジェクト、このテストベッドで使用されているものは、インデックス付きの場所がある1ページのサイト（たとえば、index.html＃home）であることに注意してください。これは、他のソリューションで特定のフレームを更新することができなかった理由に関係している可能性があります。

そうは言っても、私はそれが世界で最もきれいなものではないことを知っていますが、それは私の目的のために機能します。これが誰かを助けることを願っています。ここで、iframe内にアニメーションがあるたびにiframeが親ページをスクロールしないようにする方法を理解できたとしたら...

編集： 私はこれが私が望んでいたようにiframeを「リフレッシュ」しないことに気付きました。ただし、iframeの初期ソースは再読み込みされます。それでも、他のオプションが機能しない理由を理解できません。

更新： 他のメソッドを機能させることができなかった理由は、Chromeでテストしていたためであり、Chromeではiframeのコンテンツにアクセスできません（説明：Chromeの将来のリリースではcontentWindowがサポートされる可能性があります） / contentDocument（iFrameがローカルのhtmlファイルをローカルのhtmlファイルからロードするとき？））同じ場所からのものでない場合（私が理解している限り）。さらにテストすると、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()