web-dev-qa-db-ja.com

iframeをリロード/更新するための最良の方法は何ですか？

JavaScriptを使用して<iframe>をリ​​ロードしたいです。私がこれまでに見つけた最良の方法はiframeのsrcname__属性をそれ自身に設定することでした、しかしこれはあまりきれいではありません。何か案は？

javascriptiframe
218
caffo
document.getElementById('some_frame_id').contentWindow.location.reload();

firefoxでは、window.frames[]をidでインデックスすることはできませんが、名前またはインデックスでインデックスすることはできません。

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

ドメインをまたいでも、iframeがリロードされます。 IE7/8、FirefoxおよびChromeでテスト済み。

177
evko

JQueryを使っているなら、これはうまくいくようです：

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

私はそれがstackoverflowのためにそれほど醜くないことを願っています。

57
lousygarua
window.frames['frameNameOrIndex'].location.reload();
14
scunliffe

空きスペースを追加すると、iFrameも自動的に再ロードされます。

document.getElementById('id').src += '';
12
Yohanes AI

同じOriginポリシー のため、これは異なるドメインを指すiframeを変更するときには機能しません。新しいブラウザをターゲットにできる場合は、 HTML5のクロスドキュメントメッセージング を使用することを検討してください。あなたはここでこの機能をサポートするブラウザを見ます： http://caniuse.com/#feat=x-doc-messaging 。

あなたがHTML5の機能を使うことができないなら、あなたはここに概説されたトリックに従うことができます： http://softwareas.com/cross-domain-communication-with-iframes 。そのブログ記事はまた問題を定義するのによい仕事をします。

8
big lep

私はクロムでこれに遭遇したばかりで、うまくいったのはiframeの削除と置き換えだけでした。例：

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

他の答えではカバーされていません。

4
Liam M

新しいURL用

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

Assign（）メソッドは新しい文書をロードします。

リロードする

location.reload();

Reload（）メソッドは現在のドキュメントをリロードするために使用されます。

4
user2675617

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）で働いていました。

実際にreload機能をテストすることで、もっと良くなるかもしれませんが、今のところそれで十分です。 :)

3
Aaron Wallentine

私の場合は、iframe要素のsrc属性を置き換えるだけでは不十分です。新しいページがロードされるまで古いコンテンツが表示されるためです。あなたが即座の視覚的なフィードバックを与えたいならば、これはよりよく働きます：

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

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;
}
2
yajra

これをクロム66で動作させるために、これを試してください。

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

あなたがJqueryを使っているなら、1行のコードがあります。

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

あなたが同じ親と一緒に働いているなら

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

無意味なクエリ文字列パラメータを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>

それは見られないでしょう＆あなたがパラメータが安全であることに気付いているならそれはそれで良いはずです。

2
user1212212

.NETを使用するIE8では、最初にiframe.srcを設定しても問題ありませんが、2回目にiframe.srcを設定してもiframedページのpage_loadを引き上げることはできません。それを解決するために私はiframe.contentDocument.location.href = "NewUrl.htm"を使いました。

JQuery thickBoxを使用したときにそれを発見し、thickboxのiframeで同じページを再度開こうとしました。それからそれはちょうど開かれたより早いページを示しました。

2
Shaulian

上記のすべてがうまくいかない場合：

window.location.reload();

これが何らかの理由で、スクリプト全体ではなく私のiframeを更新しました。たぶんそれはフレーム自体の中に置かれているので、あなたが他のフレームからフレームをリフレッシュしようとするとき、それらすべてのgetElemntById解決策はうまくいきますか？

それとも私はこれを完全に理解していないのでちょっとおしゃべりしています。

1
Marcin Janeczek

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();" />
1
Vivek Kumar

デバッグ目的のためにコンソールを開いて実行コンテキストをリフレッシュしたいフレームに変更してdocument.location.reload()を実行することができます。

0
h3dkandi

他のすべての提案を試してみて、それらのどれもうまく動かなかった場合（私ができなかったように）、ここで試してみることができる便利なことがあります。

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でテストしていたためです。 iframeのコンテンツにアクセスする（説明： iFrameがローカルのhtmlファイルからローカルのhtmlファイルをロードするときにChromeの将来のリリースではcontentWindow/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);
    }
});
0
Todd
<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script>
0
Sid

別の解決策.

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

frame.parentNode.replaceChild(frame.cloneNode(), frame);
0
Vasile Alexandru Peşte