iframe 표시 내용을 전환합니다.

Question

내 웹 페이지에 iframe이 있습니다. 이제이 iframe 위에 2 개의 버튼이 표시되어 해당 iframe에 표시되는 내용이 변경됩니다.

그래서 항상 하나의 iframe 만 표시되지만 하나의 버튼은 하나의 URL을 만들고 다른 버튼은 다른 URL로 변경합니다.

어떻게할까요? 감사합니다. 이 같은

Answer 1

뭔가 : 당신은 click 이벤트를 수신하기 위해 button들에 이벤트 리스너을 설정해야합니다

<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

. 이벤트에서 click에 해당하는 버튼을 확인하고 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> 

자바 스크립트

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`

을 가질 수