Załaduj ponownie iframe za pomocą jQuery

Mam dwa elementy iframe na stronie i jeden wprowadza zmiany w drugim, ale drugi element iframe nie pokazuje zmiany, dopóki nie odświeżę. Czy istnieje łatwy sposób na odświeżenie tego elementu iframe za pomocą jQuery?

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

Jeśli element iframe nie znajdował się w innej domenie, możesz zrobić coś takiego:

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

Ale ponieważ element iframe znajduje się w innej domenie, nie będzie można uzyskać dostępu do contentDocumentwłaściwości elementu iframe na podstawie zasad tego samego pochodzenia .

Możesz jednak wymusić ponowne załadowanie międzydomenowego elementu iframe, jeśli kod jest uruchomiony na stronie nadrzędnej elementu iframe, ustawiając jego atrybut src na siebie. Lubię to:

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

Jeśli próbuje przeładować iframe z innej iframe, masz pecha, że to nie możliwe.

$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

możesz także użyć jquery. To jest to samo, co Alex zaproponował po prostu używając JQuery:

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

Załaduj ponownie iframe za pomocą jQuery

stwórz link wewnątrz iframe, powiedzmy z id = "reload", a następnie użyj następującego kodu

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

i możesz korzystać ze wszystkich przeglądarek.

Załaduj ponownie ramkę iframe za pomocą HTML (brak wymagania Java Script)

Ma prostsze rozwiązanie: działa bez javaScript w (FF, Webkit)

po prostu zrób kotwicę w swoim elemencie iframe

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

Po kliknięciu tej kotwicy po prostu odświeży element iframe

Ale jeśli masz parametr wysyłany do elementu iframe, zrób to w następujący sposób.

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

nie potrzebujesz adresu URL strony, ponieważ -> target = "_ SELF" zrobi to za Ciebie

z jquery możesz użyć tego:

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

Po prostu odwzajemniam odpowiedź Alexa, ale za pomocą jQuery

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

Oto inny sposób

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

Jestem prawie pewien, że wszystkie powyższe przykłady tylko przeładowują iframe z oryginalnym src, a nie z bieżącym adresem URL.

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

Powinno to zostać ponownie załadowane przy użyciu bieżącego adresu URL.

Jeśli korzystasz z wielu domen, po prostu ustawienie źródła z powrotem na ten sam adres URL nie zawsze spowoduje ponowne załadowanie, nawet jeśli zmieni się skrót lokalizacji.

Napotkałem ten problem podczas ręcznego tworzenia ramek iframe przycisku Twittera, które nie odświeżyły się po zaktualizowaniu adresów URL.

Przyciski podobne do Twittera mają postać: .../tweet_button.html#&_version=2&count=none&etc=...

Ponieważ Twitter używa fragmentu dokumentu jako adresu URL, zmiana hasha / fragmentu nie załadowała ponownie źródła, a cele przycisku nie odzwierciedlały mojej nowej treści załadowanej przez Ajax.

Możesz dołączyć parametr ciągu zapytania, aby wymusić ponowne załadowanie (np .: "?_=" + Math.random() ale spowoduje to marnowanie przepustowości, szczególnie w tym przykładzie, gdzie podejście Twittera polegało na próbie włączenia buforowania.

Aby przeładować coś, co zmienia się tylko za pomocą tagów hash, musisz usunąć element lub zmienić src, poczekaj na wyjście wątku, a następnie przypisz go z powrotem. Jeśli strona nadal znajduje się w pamięci podręcznej, nie powinno to wymagać trafienia w sieć, ale powoduje ponowne załadowanie ramki.

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

Aktualizacja : Korzystanie z tego podejścia tworzy niechciane elementy historii. Zamiast tego za każdym razem usuń i utwórz ponownie element iframe, dzięki czemu ten przycisk wstecz () działa zgodnie z oczekiwaniami. Miło też nie mieć timera.

Po prostu odwzajemniam odpowiedź Alexa, ale z jQuery:

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

Lub możesz użyć małej funkcji:

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

Mam nadzieję, że to pomoże.

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

Jest to możliwe dzięki prostemu JavaScriptowi.

• W iFrame1 utwórz funkcję JavaScript, która jest wywoływana w tagu body onload. Mam go sprawdzić zmienną po stronie serwera, którą ustawiłem, więc nie próbuje uruchamiać funkcji JavaScript w iframe2, chyba że wykonałem określoną akcję w iframe1. Możesz ustawić to jako funkcję uruchamianą po naciśnięciu przycisku lub jak chcesz w iframe1.
• Następnie w iframe2 masz drugą funkcję, którą wymienię poniżej. Funkcja w iframe1 po prostu przechodzi do strony nadrzędnej, a następnie używa window.framesskładni do uruchomienia funkcji JavaScript w iframe2. Po prostu upewnij się, że używasz id/ namez iframe2, a nie src.

//function in iframe1
function refreshIframe2()
{
    if (<cfoutput>#didValidation#</cfoutput> == 1)
    {   
         parent.window.frames.iframe2.refreshPage();
    }
}

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

// odśwież wszystkie ramki iframe na stronie

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

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

    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

rozwiązanie dla różnych przeglądarek to:

    ifrX.src = ifrX.contentWindow.location

jest to przydatne zwłaszcza, gdy <iframe> jest celem <form>

ROZWIĄZANY! Rejestruję się do stockoverflow tylko po to, aby udostępnić Ci jedyne rozwiązanie (przynajmniej w ASP.NET/IE/FF/Chrome), które działa! Chodzi o to, aby zastąpić wartość innerHTML elementu div jego bieżącą wartością innerHTML.

Oto fragment kodu 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>

I mój kod Javascript:

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

Mam nadzieję że to pomoże.

Musisz użyć

[0] .src

aby znaleźć źródło elementu iframe i jego adres URL, muszą znajdować się w tej samej domenie elementu nadrzędnego.

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

możesz to zrobić w ten sposób

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });

Poniższe rozwiązanie na pewno zadziała:

window.parent.location.href = window.parent.location.href;