Question

我的网页上有一个iframe，现在我想在这个iframe上方有2个按钮，这将改变iframe中显示的内容。

所以它仍然只显示一个iframe，但是一个按钮使其成为一个url，然后另一个按钮将其更改为另一个url。

如何做到这一点，谢谢。

Answer 1

这样的事情：

<input type="button" onclick="load('page1.html')" value="page 1"/>
<input type="button" onclick="load('page2.html')" value="page 2"/>

<iframe id="my_iframe"></iframe> 

<script>
function load(page) {
  document.getElementById("my_iframe").src = page;
}
</script>

Answer 2

您需要在button上设置事件监听器以收听click事件。在活动内部，确定哪个按钮为click，并将src的{{1}}属性更改为您要展示的内容。

<强> HTML

iframe

<强>的JavaScript

<button id="one">Test 1</button>
<button id="two">Test 2</button>
<iframe id="iframe" src="http://jsfiddle.net/ChaseWest/Zfq7v/" width="100%" height="600px"></iframe>

注意：您可以轻松拥有两个单独的事件函数，而不仅仅是一个var buttonOne = document.getElementById("one"); var buttonTwo = document.getElementById("two"); var iframe = document.getElementById("iframe"); buttonOne.addEventListener("click", buttonClick, false); buttonTwo.addEventListener("click", buttonClick, false); function buttonClick(e){ if(e.target.id === "one"){ iframe.src = "http://jsfiddle.net/ChaseWest/Zfq7v/"; }else{ iframe.src = "http://jsfiddle.net/ChaseWest/u73rF/"; } };事件

EXAMPLE

切换iframe显示的内容

2 个答案: