Iframe重新加载按钮

Question

我在许多网站上查看了，但它们似乎都行不通，或者我无法理解它们。我想要一个简单的按钮来刷新特定的iframe。该按钮将位于父页面上，iframe名称为“Right”。

- user1373771

Answer 1

有很多方法可以做到这一点。假设有以下iframe标记：

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

我们可以通过函数调用来实现：

HTML

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

JS

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

或者使用内联JS：

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

或者使用事件监听器：

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<= 8。

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与标记混合在一起，监听器似乎也是不必要的，但这只是我的想法。选择最适合你的方法即可。

- Fabrício Matté

---

哇！我从来没有想过有这么多方法可以做到这一点！我希望有人能把这个放在一个关于iframe的网站上！谢谢！ - user1373771

@user1373771 没问题，如果这就是你需要的所有答案，你可以在有时间的时候将其标记为已接受的答案。:P - Fabrício Matté

Answer 2

在你的 iframe 中添加新的 id，并尝试下面的代码。

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

- Dips

---

OP说的是“name”，不是“id”。标签中没有jQuery，问题中也没有。而且你在结尾处有无效的语法。 - Fabrício Matté