javascript - 切换 iframe 显示的内容

Question

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

因此，它始终只显示一个 iframe，但一个按钮使其成为一个 url，然后另一个按钮将其更改为另一个 url。

这个怎么做，谢谢。

Answer 1

您需要在s上设置事件侦听器来侦听事件。在事件内部，确定哪个按钮被编辑并将您的属性更改为您要显示的内容。buttonclickclicksrciframe

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

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`

例子

Answer 2

像这样的东西：

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