有很多方法可以做到这一点。假设这个iframe
markup:
<iframe name="Right" src="http://www.example.com"></iframe>
我们可以用函数调用 http://jsfiddle.net/ult_combo/YJrK9/:
HTML
<button onclick="refreshIframe();">Refresh Iframe</button>
JS
function refreshIframe() {
var ifr = document.getElementsByName('Right')[0];
ifr.src = ifr.src;
}
Or with 内联JS http://jsfiddle.net/ult_combo/YJrK9/1/:
<button onclick="var ifr=document.getElementsByName('Right')[0]; ifr.src=ifr.src;">Refresh Iframe</button>
或者使用事件监听器 http://jsfiddle.net/ult_combo/YJrK9/3/:
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;
});
}
和上面一样,现在支持 IE 而不是匿名的: http://jsfiddle.net/ult_combo/YJrK9/4/
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,并且侦听器似乎是不必要的,但这只是我的想法。选择更适合您的。