Javascript 切换iframe显示的内容

Javascript 切换iframe显示的内容,javascript,html,button,iframe,Javascript,Html,Button,Iframe,我在我的网页上有一个iframe,现在我想在这个iframe上面有两个按钮,它将改变这个iframe中显示的内容 因此,它始终只显示一个iframe,但一个按钮将其设置为一个url,然后另一个按钮将其更改为另一个url 要怎么做,谢谢。类似这样的事情: <input type="button" onclick="load('page1.html')" value="page 1"/> <input type="button" onclick="load('page2.html'

我在我的网页上有一个iframe,现在我想在这个iframe上面有两个按钮,它将改变这个iframe中显示的内容

因此,它始终只显示一个iframe,但一个按钮将其设置为一个url,然后另一个按钮将其更改为另一个url

要怎么做,谢谢。

类似这样的事情:

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

功能加载(第页){
document.getElementById(“my_iframe”).src=page;
}

您需要在
按钮上设置事件侦听器,以侦听
单击事件。在事件内部,确定哪个按钮被
单击
ed,并将
iframe
src
属性更改为要显示的内容

HTML

<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>
注意:您可以很容易地拥有两个单独的事件函数,而不仅仅是一个
按钮单击
事件`


Javascript是您的朋友,在按钮上绑定click事件并在单击时更改iframe src
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/";
    } 
};