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

Question

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

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

Answer 1

您只需要iframe使用 Javascript获取元素并更改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>

编辑以考虑评论

Answer 2

您可以通过使用更改 iframe 的 src 属性的函数来实现此目的。

<iframe src="http://cbc.ca/" id="theiframe" width="500" marginwidth="0" height="500" marginheight="0" align="middle" scrolling="auto"></iframe>
<button onclick="loadnewpage('http://bbc.com')">BBC Page</button>
    <button onclick="loadnewpage('http://cbc.ca')">CBC Page</button>

<script>
    function loadnewpage(newsrc){
        var newloc = newsrc;
        document.getElementById('theiframe').setAttribute('src', newloc);
    }
</script>

查看 JS 函数参数和参数以了解有关其工作原理的更多信息