Załaduj ponownie iframe za pomocą jQuery


151

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>

3
Czy dokument iframe znajduje się w innej domenie?
Pekka

Czy masz dostęp do kodu witryny, który pojawia się w ramce iFrame?
Matt Asbury,

Pokaż więcej kodu - kod HTML dla obu ramek iFrame, a także kod javascript, którego używasz do wprowadzania zmian. Trudno zrozumieć, na czym polega problem, widząc tylko to, co do tej pory uwzględniłeś.
Ben Lee

Mam dostęp do kodu tak, a iframe jest na innej domenie
Matt Elhotiby

@Matt, ramki nie mogą zmieniać zawartości ramek w innych domenach. Aby zapoznać się z przykładami obejścia tego ograniczenia dotyczącego skryptów międzydomenowych, zobacz: softwareas.com/cross-domain-communication-with-iframes
Ben Lee

Odpowiedzi:


174

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.


19
Jego pytaniem było, jak to osiągnąć za pomocą jQuery, a nie Javascript. Zobacz post Sime Vidas poniżej, aby uzyskać poprawną odpowiedź na jQuery.
FastTrack,

2
Skrypt nie działa w moim IE9 (nie sprawdzaj innej wersji). Zmień contentDocument do contentWindow sprawia, że praca na IE9. document.getElementById(FrameID).contentWindow.location.reload(true);
Han He

3
To nie zadziałało dla mnie, ale iframe.contentDocument.location=iframe.src; zamiast tego zrobiłem coś takiego, co zadziałało świetnie
glitchyme

3
Ten Jquery działał na mnie jak urok:$('#map_iframe').attr('src', $('#map_iframe').attr('src'));
Topher Hunt

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

2
+1 za posiadanie tylko jednego odniesienia do identyfikatora, mniejsze prawdopodobieństwo zmiany jednego, ale zapomnienie o drugim
Matthew Lock,

1
@NicolaeSurdu Również to:(function (elem) { elem.src = elem.src; }($('#iframe')[0]));
Šime Vidas

1
Aby przeładować jedną ramkę iframe z drugiej, zmień na: $ ('# iframe', window.parent.document) .attr ('src', function (i, val) {return val;});
Tillito

W przeglądarce Internet Explorer rozwiązania javascript, takie jak, document.getElementById(FrameID).contentWindow.location.reload(true);nie działają poprawnie. Ta odpowiedź działa lepiej.
BeyazKaplan

55

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

3
Zaletą tego rozwiązania jest czytelność. Chociaż nie jest tak skuteczna, jak odpowiedź Vidasa, oczywiste jest, co się dzieje.
Robert Egginton

Zgadzam się, wolę też czytelność tego rozwiązania
Yonatan Naor

var f = $('#iframeX') ; f.attr( 'src', f.attr( 'src' ))może być bardziej wytrzymały w utrzymaniu i czytaniu
Andreas Dietrich

9

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


9

z jquery możesz użyć tego:

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

To rozwiązanie, jeśli chcesz odświeżyć obecny iframe, w którym się znajdujemy. Wielkie dzięki!
DaemonHK

5

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

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

4

Oto inny sposób

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

1
$( '#iframe' ).attr('src', $( '#iframe' ).attr('src'));
zanderwar

3

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.


2

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.


2

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.



1

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();
}

1

// 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;
                        }

0
    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>


dlaczego jQuery ?! kiedy dostępny jest prosty js
bortunac

0

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.


Wiele błędów w tej odpowiedzi: 1. nie jest składnikiem ASP.NET, dlatego runat="server"nie ma zastosowania; 2. Dlaczego wszystkie czapki IFRAME? 3. wartości atrybutów wymiarów nie mają jednostek; 4. frameborderjest przestarzały
Raptor

0

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

0

możesz to zrobić w ten sposób

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

-5

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

window.parent.location.href = window.parent.location.href;
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.