Iframe重新加載按鈕

Question

我看了很多網站，但他們都沒有人似乎工作正確或我不明白他們。我想要一個簡單的按鈕來刷新某個iframe。該按鈕將位於父頁面上，並且iframe名稱爲「右」。

Answer 1

有很多方法可以做到這一點。假設這iframe標記：

HTML

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

JS

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

或者：

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

我們可以用一個function call做與inline JS：

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

或使用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; 
    }); 
} 

與上述相同，沒有w^with support for IE <= 8 and using a function in the global scope as handler，而不是一個匿名之一：

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

所有這一切，甚至沒有接觸的jQuery或任何其他庫。

您應該使用哪些？無論你認爲哪個更具可維護性和可讀性。儘可能避免全局變量。我會親自避免使用標記的內聯JS，而聽衆似乎沒有必要，但那只是我自己。選擇適合你的更好的。

Answer 2

在你的iframe中添加新的id並嘗試下面的代碼。

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