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