how to open different URLs in iframes using JavaScript and HTML buttons

Question

So I want to make a small website with a menu that has four HTML buttons. Instead of the buttons opening a completely new website I just want an iframe tag to change the URL it's displaying according to the buttons that are pressed.

Please keep it simple, I am a beginner in HTML, JS and CSS. Thanks!

This sounds a bit convoluted. Why not create the navigation and included it on each of the four pages that it links to? — hungerstar, Feb 05 '18 at 22:10

Mohammed Ilyass NASR · Accepted Answer · 2018-02-06T20:56:30.153

You just need to get the iframe element with Javascript and change the src attribute The question has already been answered here : 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>

EDITED to take comment into consideration

Management nightmare creating inline listeners like that. – hungerstar Feb 06 '18 at 17:51 — hungerstar, Feb 06 '18 at 17:51

Zedkay22 · Answer 2 · 2018-02-05T22:12:36.737

You can do this by having a function that changes the src attribute of the iframe.

<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

Bind event listeners in JS. – hungerstar Feb 05 '18 at 22:11 — hungerstar, Feb 05 '18 at 22:11

score 3 · Answer 3 · answered Feb 05 '18 at 22:18

You can use the target attribute of an anchor tag, to tell the link to load in the iframe. I think that's the simplest way.

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

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

how to open different URLs in iframes using JavaScript and HTML buttons

3 Answers3