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

【问题标题】：how to open different URLs in iframes using JavaScript and HTML buttons如何使用 JavaScript 和 HTML 按钮在 iframe 中打开不同的 URL
【发布时间】：2018-02-05 21:56:51
【问题描述】：

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

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

【问题讨论】：

这听起来有点复杂。为什么不创建导航并将其包含在它链接到的四个页面中？

标签： javascript html css button iframe

【解决方案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>

编辑考虑评论

【讨论】：

像这样创建内联侦听器的管理噩梦。

【解决方案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

【讨论】：

在JS中绑定事件监听器

【解决方案3】：

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

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

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

【讨论】：