web-dev-qa-db-ja.com

jQueryを使ってiframeをリロードする

1つのページに2つのiframeがあり、一方は他方に変更を加えますが、もう一方のiframeは更新するまで変更を表示しません。 jQueryでこのiframeを更新する簡単な方法はありますか？

<div class="project">
  <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe>
</div>
javascriptjqueryhtmliframe
141
Matt Elhotiby

Iframeが別のドメインにない場合は、次のようにします。

document.getElementById(FrameID).contentDocument.location.reload(true);

しかし、iframeは別のドメインにあるため、 same-Originポリシー によってiframeのcontentDocumentプロパティへのアクセスが拒否されます。

ただし、コードがiframeの親ページで実行されている場合は、src属性を自分自身に設定することで、クロスドメインのiframeを強制的にリロードさせることができます。このような：

// hackishly force iframe to reload
var iframe = document.getElementById(FrameId);
iframe.src = iframe.src;

あなたが他のiframeからiframeをリロードしようとしているなら、あなたは運が悪いです、ということはではありません可能です。

164
Alex
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
224
Šime Vidas

jqueryも使えます。これは、AlexがJQueryを使って提案したものと同じです。

 $('#currentElement').attr("src", $('#currentElement').attr("src"));
50
ynh

jQueryを使ってiframeをリロード

iframeの内側にリンクを張って、id = "reload"で言って次のコードを使う

$('#reload').click(function() {
    document.location.reload();
});

そして、あなたはすべてのブラウザで行くのが得意です。

iframeをHTMLでリロードします（Java Scriptは必要ありません）

よりシンプルな解決策があります。（FF、Webkit）では、Javaスクリプトなしで動作します。

あなたのiframeの中にアンカーを入れるだけです

   <a href="#" target="_SELF">Refresh Comments</a>

このアンカーをクリックすると、iframeが更新されます

しかしあなたのiframeにパラメータを送る場合は、以下のようにしてください。

  <a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a>

- > target = "_ SELF"があなたのためにそれをするので、ページのURLを必要としません

9
user1008545

jqueryではこれを使うことができます。

$('#iframeid',window.parent.document).attr('src',$('#iframeid',window.parent.document).attr('src'));
8
elin3t

アレックスの答えをただjQueryで往復するだけ

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);
5
Matt Asbury

上記のすべての例では、iframeを現在のURLではなく、元のsrcのみで再ロードすることを確信しています。

$('#frameId').attr('src', function () { return $(this).contents().get(0).location.href });

現在のURLを使用してリロードする必要があります。

3
Mark

これは別の方法です

$( '#iframe' ).attr( 'src', function () { return $( this )[0].src; } );
3
Nasir Mahmood

Alexの答えをjQueryで往復させるだけです。

var e = $('#myFrame');
    e.attr("src", e.attr("src"));

あるいは、あなたは小さな関数を使うことができます：

function iframeRefresh(e) {
    var c = $(e);
        c.attr("src", c.attr("src"));
}

助けになれば幸いです。

2
Akm16
$('IFRAME#currentElement').get(0).contentDocument.location.reload()
2
Pavel

クロスドメインの場合、srcを同じURLに戻すだけでは、たとえロケーションのハッシュが変わっても、必ずしもリロードを引き起こすわけではありません。

手動でTwitterボタンのiframeを作成しているときにこの問題に遭遇しました。これはURLを更新しても更新されません。

Twitterのようなボタンは次のような形式になっています：.../Tweet_button.html#&_version=2&count=none&etc=...

TwitterはURLにドキュメントフラグメントを使用しているので、ハッシュ/フラグメントを変更してもソースはリロードされず、ボタンターゲットは私の新しいAjaxロードコンテンツを反映しませんでした。

リロードを強制するためのクエリ文字列パラメータを追加することができます（例："?_=" + Math.random()）、特にTwitterのアプローチが特にキャッシュを有効にしようとしているこの例では、帯域幅を浪費します。

ハッシュタグだけで変更されるものをリロードするには、要素を削除するか、srcを変更し、スレッドが終了するのを待ってから割り当てなおす必要があります。ページがまだキャッシュされている場合、これはネットワークヒットを必要としないはずですがフレームリロードを引き起こします。

 var old = iframe.src;
 iframe.src = '';
 setTimeout( function () {
    iframe.src = old;
 }, 0);

更新：この方法を使用すると、不要な履歴項目が作成されます。代わりに、毎回iframe要素を削除して再作成してください。これにより、このback（）ボタンは正常に機能し続けます。タイマーがないのもいいですね。

2
greg.kindel

これは単純なJavaScriptで可能です。

  • IFrame1で、bodyタグのonloadで呼び出されるJavaScript関数を作成します。設定したサーバー側の変数をチェックして、iframe1で特定のアクションを実行しない限り、iframe2でJavaScript関数を実行しようとしません。これはボタンを押すことで起動する関数として設定することも、iframe1で設定することもできます。
  • それからiframe2で、あなたは私が以下にリストする2番目の関数を持っています。 iframe1の関数は基本的に親ページに行き、次にwindow.frames構文を使用してiframe2のJavaScript関数を起動します。 idではなく、iframe2のname/srcを必ず使用してください。
//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

//function in iframe2
function refreshPage()
{   
    document.location.reload();
}
1
Keith Pastorek

//ページ上のすべてのiframeを更新する

var f_list = document.getElementsByTagName('iframe');

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }
1
wesley7

解決しました！私は、（少なくともASP.NET/IE/FF/Chromeで）機能する唯一の解決策をあなたに共有するためだけにstockoverflowに登録します！アイデアはdivのinnerHTML値を現在のinnerHTML値に置き換えることです。

これがHTMLスニペットです。

<div class="content-2" id="divGranite">
<h2>Granite Purchase</h2>
<IFRAME  runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless  ></IFRAME>
</div>

そして私のJavascriptコード：

function refreshGranite() {           
   var iframe = document.getElementById('divGranite')
   iframe.innerHTML = iframe.innerHTML;
}

お役に立てれば。

0
hubert17

あなたはこれのようにそれをすることができます

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });
0
aitbella
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

クロスブラウザソリューションは次のとおりです。

    ifrX.src = ifrX.contentWindow.location

これは、<iframe>が<form>のターゲットの場合に特に便利です。

0
bortunac

あなたが使用する必要があります

[0] .src

iframeのソースとそのURLを見つけるには、親の同じドメインにある必要があります。

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}
0
Mau