i am trying to open different iframe windows by assigning iframe src to a variable ,
when the page initially loads it should show only two buttons on the page , when i click on the button , an iframe should get loaded depending on which button is pressed , i tried doing something like this to create buttons and creating iframes , but it is not working
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="whatnext">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x = "Hello!";
function showX() {
var whatnext;
if b1.onclick==true
whatnext= "http://www.sitepoint.com/community/" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;"
elseif b2.onclick=true
whatnext= "http://www.sitepoint.com/community/" style="border: 0px none; height: 555px; margin-left: -116px; margin-top: -25px; width: 330px;"
}
</script>
and another piece of trial is
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="x" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x ;
function showX() {
src="http://stackoverflow.com";
}
b1.onclick = function() {
x = "www.sitepoint.com";
showX();
};
b2.onclick = function() {
x = "community.sitepoint.com";
showX();
};
</script>
Try this, not complete but at least it is a start:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="iframe.js"></script>
<style type="text/css">
p {width:88%; margin:2em auto;}
#video {float:left; margin: 1em 1em 0 0; background-color:#fdd;
width:360px; height:240px;line-height:185px; text-align:center;}
iframe {width:640px; height:360px; margin:4em auto;}
h4 {margin:0; padding:0;}
</style>
<title>Javascript calling iFrame</title>
</head>
<body>
<div style="float:left; width:15em; height:240px; margin:1em 1em 0 0; background-color:#dff;">
<h4><a href="http://www.developerfusion.com/thread/33979/creating-iframe-through-javascripti">
Source </a> </h4>
<p><a href="#" onmousedown="sitepoint()">
SitePoint</a></p>
<p><a href="#" onmousedown="bing()">
Bing </a> </p>
<p><a href="#" onmousedown="football('2sD_8prYOxo')" >
football</a> </p>
<p><a href="#" onmousedown="beerMontage()" >
Beer </a> </p>
</div>
<div id="video" >
How can Iget the iFrame to go here?
</div>
</body>
</html>
iframe.js
var hw = 640;
var hh = 480;
function sauce() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://www.developerfusion.com/thread/33979/creating-iframe-through-javascripti");
ifrm.style.width = 240+"px";
ifrm.style.height = 180+"px";
document.body.appendChild(ifrm);
}
function bing() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "https://www.bing.com/");
ifrm.style.width = 240+"px";
ifrm.style.height = 180+"px";
document.body.appendChild(ifrm);
}
function sitepoint() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://sitepoint.com/");
ifrm.style.width = 240+"px";
ifrm.style.height = 180+"px";
document.body.appendChild(ifrm);
}
function football(vUrl) {
var divID = document.getElementById("video");
var videoId = 'http://www.youtube.com/embed/'+vUrl;
var video = '<iframe frameborder="0" scrolling="no" height="'+hh+'" width="'+hw+'" name="myFrame" src="'+videoId+'"></iframe>';
document.write(video);
}
function beerMontage(videoId) {
var msg2 = 'it works: \n';
var divID = document.getElementById("video");
// var hh = divID.style.height;
// var hw = divID.style.width;
var vUrl = 'lmBRZ7UR3Rw';
var videoId = 'http://www.youtube.com/embed/'+vUrl;
var video = '<iframe frameborder="0" scrolling="no" height="'+hh+'" width="'+hw+'" name="myFrame" src="'+videoId+'" allowfullscreen></iframe>';
alert(msg2 + hw + 'x' + hh + '\n' + videoId);
document.write(video);
// document.body.appendChild(ifrm);
}
My JavaScipt knowledge is severely limited 
I am unable to get the iframe positioned correctly and would be grateful if somebody could supply a solution.
http://www.johns-jokes.com/downloads/sp-d/
My knowledge is even less so. But instead of doing this
document.body.appendChild(ifrm);
Append it to the video element
function sitepoint() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://sitepoint.com/");
ifrm.style.width = 240+"px";
ifrm.style.height = 180+"px";
document.getElementById("video").appendChild(ifrm);
}
Your CSS was bad too by the way, you need to have the video element be at least the widht/height of hte iframe.
p {width:88%; margin:2em auto;}
#video {float:left; margin: 1em 1em 0 0; background-color:#fdd;
width:800px; height:500px;line-height:185px; text-align:center;}
iframe {width:640px; height:360px; margin:4em auto;}
h4 {margin:0; padding:0;}
You should really be doing this as event listeners though instead of that onmouseover=“” crap 
Edit-This whole thing could be done a lottt cleaner. I’ll let a pro do it though.
Edit2- To clarify, that document.getElementById() needs to be put on every function. I used sitepoint() as an example.
I tried document.getElementById(“video”).appendChild(ifrm); and it did not do what I wanted it to do. In fact it had no effect 
I would like the ifrm to resize and appear inside the div video
Are there any JavaScript Programmers that could offer advice or at least supply the magic words for a Google search?
For the life of me, I cannot figure out why this does not work. The width/height setting.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style type="text/css">
p {width:88%; margin:2em auto;}
#video {float:left; margin: 1em 1em 0 0; background-color:#fdd;
width:500px; height:500px;line-height:185px; text-align:center;}
iframe {margin:4em auto;}
h4 {margin:0; padding:0;}
</style>
<title>Javascript calling iFrame</title>
</head>
<body>
<div style="float:left; width:15em; height:240px; margin:1em 1em 0 0; background-color:#dff;">
<p><a href="#" onmousedown="sitepoint()">
SitePoint</a></p>
</div>
<div id="video">
</div>
<script>
function sitepoint() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://sitepoint.com/");
ifrm.style.width = document.getElementById("video").style.width;
ifrm.style.height = document.getElementById("video").style.height;
document.getElementById("video").appendChild(ifrm);
}
</script>
</body>
</html>
Got it. Offsetheight. That’s weird
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
p {width:88%; margin:2em auto;}
#video {float:left; margin: 1em 1em 0 0; background-color:#fdd;
width:500px; height:500px;line-height:185px; text-align:center;}
h4 {margin:0; padding:0;}
</style>
<title>Javascript calling iFrame</title>
</head>
<body>
<div style="float:left; width:15em; height:240px; margin:1em 1em 0 0; background-color:#dff;">
<p><a href="#" onmousedown="sitepoint()">
SitePoint</a></p>
</div>
<div id="video">
</div>
<script>
function sitepoint() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://sitepoint.com/");
ifrm.style.width = document.getElementById("video").offsetWidth+"px";
ifrm.style.height = document.getElementById("video").offsetHeight+"px";
document.getElementById("video").appendChild(ifrm);
}
</script>
</body>
</html>
Edit-John, the append child I mentioned did work for me. As seen in my above code. Not sure why it wasn’t working for you…
Hi @RyanReese,
I have made some more small changes, the Web-Pages now display OK but struggling with the Videos which open in a new window and not in the <div id=“video” …
The problem of not displaying correctly, was due to displaying on a second monitor which has a small screen. I also removed the line-height:180px and the display is now a lot better.
I would be grateful if any JavasScript Guru is available to make the video display on the same page and also inside the div.
Source code is displayed at the bottom of each page.
That’s weird. It’s not letting me write anything even with a simple <p>. Maybe you need to do it like createElement() instead of writing out the HTML in a variable.
<!doctype html>
<html>
<head>
<base href="http://www.johns-jokes.com/downloads/sp-d/_john_betong_003.php" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style-iframe.css" />
<style type="text/css">
</style>
<title> John_Betong - 002</title>
</head>
<body>
<div id="menu">
<button onclick="getVideo('MENjFkEAj9g')">Thai Market</button> </div>
<div id="video" style="max-width:740px; min-height:580px;">
</div>
<script type="text/javascript">
function getVideo(vUrl) {
hw = 640;
hh = 480;
var videoId = "http://www.youtube.com/embed/"+vUrl;
var divID = document.getElementById("video");
var sVid = "<p>crap</p>";
document.getElementById("video").appendChild(sVid);
}
</script>
</body>
</html>
@RyanReese
Eventually managed to get it working…
But an alert() is required to prevent the video from flashing momentarily on the screen before disappearing forever
.
I wonder why that is. I couldn’t find any reason why the document.write causes that refresh, although I’m quite nooby at Javascript. Perhaps @felgall in his infinite wisdom can help.
Just tried it on my phone and tablet…
Only a flash again!!!
Hello Folks sorry i wasn’t able to join the conversation i started , got busy somewhere ,
here is the solution to this but still i want to make some more changes in this to make is dynamic so that i can set different heights and widths for different button clicks
Here is the HTML along with the script
<div class="loadiframe">
<button id="b1" data-src="http://jquery.com/">Button 1</button>
<button id="b2" data-src="http://sitepoint.com">Button 2</button>
</div>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">
<script>
function iframeChange() {
var buttons = document.querySelector(".loadiframe");
var iframe = document.getElementById('frame');
buttons.addEventListener("click", function (e) {
iframe.src = e.target.dataset.src;
});
}
window.onload = iframeChange;
</script>
This can be done using Jquery also
**<button class="loadiframe" id="b1" data-src="http://jquery.com/">Button 1</button>
<button class="loadiframe" id="b2" data-src="http://sitepoint.com">Button 2</button>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">
<script>
$('.loadiframe').on('click', function(){
var src = $(this).data('src');
$('#frame').attr('src', src);
});
</script>
But still i am stuck up with how to change the iframe size depending on which button is pressed
Here’s a (scaled down) example which works without the alert.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Load video into iframe</title>
<style>
body {background-color: #eff;}
#video {width:80%; height: 29em; margin:2% 0 2% 2%;}
#menu {width:10%; margin:2% 0 0 1%;}
#menu p {position:relative;}
#menu a span {display:none;}
#menu a:hover span {display:inline-block; position:absolute; top:-4.5em; left:7em; width:120px; height:90px;}
#src {clear:both; width:88%; margin: 2em auto; z-index: -1;}
.bgs {background-color: snow;}
.bdr {outset:solid 1px #999;}
.clb {clear:both;}
</style>
</head>
<body>
<div id="menu" class="clb fll">
<strong>Videos</strong>
<p>
<a href="?video=mVLdOBijoco" title="This is the first lecture of the series ...">
<span> <img src="http://i.ytimg.com/vi/mVLdOBijoco/1.jpg" width="100px" alt="#" /> </span>
Welcome
</a>
</p>
<p>
<a href="?video=Pl23L-wsCXk" title="Topics: Stack. Heap ...">
<span> <img src="http://i.ytimg.com/vi/Pl23L-wsCXk/1.jpg" width="100px" alt="#" /> </span>
Introduction
</a>
</p>
</div>
<div id="video" class="fll bgs bdr"></div>
<script type="text/javascript">
var hw = 640,
hh = hw * 480 / 640,
videoDiv = document.getElementById("video"),
videoLinks = document.querySelectorAll("a[href^='?video'"),
len = videoLinks.length,
vStr,
i;
function getVideo(video){
hw = videoDiv.offsetWidth;
hh = hw * 480 / 640;
vStr = '<iframe width="' + hw +'" height="' +hh+ '" ';
vStr += ' src="https://youtube.com/embed/';
vStr += video +'" frameborder="0" allowfullscreen>';
vStr += '</iframe>';
videoDiv.innerHTML = vStr;
}
function makeClickHandler() {
return function(e){
e.preventDefault();
var videoIdentifier = this.getAttribute("href").replace(/^\?video=/, "");
getVideo(videoIdentifier);
};
}
for(i=0; i<len; i++) {
videoLinks[i].addEventListener("click", makeClickHandler());
}
</script>
</body>
</html>
Demo
Fullscreen
Note:
document.querySelectorAll("a[href^='?video'")
seems to trip up mobile safari, so it’d be better to use a class name instead, or for the purposes of the demo:
document.querySelectorAll("a")
iPad friendly demo
Many, thanks @Pullo, I have modified your script, uploaded and it now works with smartphones, tablets and desktops.
It is a bit rough round the edges but at least it works. Most surprised the link rollover works for mobiles, I have modified the size, placement and title positions. It works a treat.
I must admit I have just copied, pasted and amended and will have to study the script later.
Many thanks once again, you are a star