переключить отображение iframe

Question

У меня есть 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 ed и измените атрибут 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> 

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

EXAMPLE