javascript - 如何使用 JavaScript 和 HTML 按钮在 iframe 中打开不同的 URL

Question

所以我想制作一个带有四个 HTML 按钮的菜单的小型网站。而不是按钮打开一个全新的网站，我只想要一个 iframe 标签来根据按下的按钮更改它显示的 URL。

请保持简单，我是 HTML、JS 和 CSS 的初学者。谢谢!

Answer 1

你只需要用 Javascript 获取 iframe 元素并更改 src 属性这个问题已经在这里得到回答:https://stackoverflow.com/a/6001043/7988438

var frame = document.getElementById("frame");

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.addEventListener("click",link1)
btn2.addEventListener("click",link2)
btn3.addEventListener("click",link3)

function link1(){
  frame.src="https://pixabay.com/photo-2845763/"
}
function link2(){
  frame.src="https://pixabay.com/photo-3126513/"
}
function link3(){
  frame.src="https://pixabay.com/photo-3114729/"
}

<button id="btn1" >link1</button>
<button id="btn2" >link2</button>
<button id="btn3" >link3</button>
<iframe id="frame" src="https://pixabay.com/photo-2845763/"></iframe>

编辑以考虑评论