javascript - iframe の表示内容を切り替える

Question

Web ページに iframe があります。この iframe の上に 2 つのボタンが必要です。これにより、その iframe に表示される内容が変更されます。

したがって、常に表示されるiframeは1つだけですが、1つのボタンで1つのURLになり、もう1つのボタンで別の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

イベントをリッスンするには、 でイベント リスナーを設定する必要があります。イベント内で、どのボタンが編集されたかを判断し、あなたの属性を表示したいコンテンツに変更します。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/";
    } 
};

注: 1 つのイベントだけでなく、2 つの個別のイベント関数を簡単に作成することもできますbuttonClick`

例