我的网页上有一个iframe,现在我想在这个iframe上面有2个按钮来改变这个iframe中显示的内容。
因此,它仍然只有一个iframe总是显示,但一个按钮使它一个网址,然后另一个按钮改变它到另一个网址。
这将是如何做到的,谢谢。
类似这样。
<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>
你需要设置 事件监听者 在...上 button
倾听 click
事件。在事件中,确定哪个按钮是 click
并改变 src
的属性 iframe
到您要显示的内容。
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>
脚本语言
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/";
}
};
注意:你可以很容易地拥有两个独立的事件函数,而不仅仅是一个。buttonClick
事件