Przycisk ponownego ładowania Iframe

Question

Przeglądałem wiele stron internetowych, ale żaden z nich nie działa poprawnie lub ich nie rozumiem. Chciałbym prosty przycisk, który odświeża pewien element iframe. Przycisk znajduje się na stronie nadrzędnej, a nazwa elementu iframe to "Right".

Answer 1

Istnieje wiele sposobów, aby to zrobić. Zakładając ten iframe znaczników:

<iframe name="Right" src="http://www.example.com"></iframe> 

Możemy to zrobić z function call:

HTML

<button onclick="refreshIframe();">Refresh Iframe</button> 

JS

function refreshIframe() { 
    var ifr = document.getElementsByName('Right')[0]; 
    ifr.src = ifr.src; 
} 

Or z inline JS:

<button onclick="var ifr=document.getElementsByName('Right')[0]; ifr.src=ifr.src;">Refresh Iframe</button> 

lub przy użyciu event listener:

HTML

<button id="iframeRefresher">Refresh Iframe</button> 

JS

window.onload = function() { 
    document.getElementById('iframeRefresher').addEventListener('click', function() { 
     var ifr = document.getElementsByName('Right')[0]; 
     ifr.src = ifr.src; 
    }); 
} 

samo jak wyżej, nie W with support for IE <= 8 and using a function in the global scope as handler zamiast anonimowego jednego:

HTML

<button id="iframeRefresher">Refresh Iframe</button> 

JS

window.onload = function() { 
    var refresherButton = document.getElementById('iframeRefresher'); 
    if (refresherButton.addEventListener) 
     refresherButton.addEventListener('click', refreshIframe, false); 
    else 
     refresherButton.attachEvent('click', refreshIframe); 
} 

function refreshIframe() { 
    var ifr = document.getElementsByName('Right')[0]; 
    ifr.src = ifr.src; 
} 

Wszystko to nawet bez dotykania jQuery lub innej biblioteki.

Którego powinieneś używać? Niezależnie od tego, co uważasz za bardziej konserwowalne i czytelne. Po prostu unikaj globalnych zmiennych, gdy tylko jest to możliwe. Osobiście unikam wbudowanego JS ze znacznikiem, a słuchacze wydają się niepotrzebni, ale to tylko ja. Wybierz, który z nich lepiej Ci odpowiada.

Answer 2

Dodaj nowy id w swoim elemencie iframe i spróbuj wpisać poniższy kod.

var iframe = document.getElementById('FrameId'); 
$("button").click(function() { 
    iframe.src = iframe.src; 
}):