Question

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

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

Answer 1

您可以使用锚标记的target属性来告知要在iframe中加载的链接。我认为这是最简单的方法。

<iframe src="http://page1.html" id="frame1" name="frame1"></iframe>

<a href="http://page2.html" target="frame1">click here for page 2</a>

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>

Check out JS function paramaters and arguments to learn more about how this works

Answer 3

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

＆＃13;

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/"
}

＆＃13;

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

＆＃13;

已编辑以考虑评论

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

3 个答案: