Welcome to WebmasterWorld Guest from 54.166.46.226

Forum Moderators: open

Message Too Old, No Replies

Write a dynamic iframe

   
7:08 pm on Nov 11, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Hi,

I wonder if the following is coded correctly:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var url = "http://www.example.com/";
var content = "<iframe width='800' height='600' frameborder='0' src='" + url + "'><\/iframe>";
document.getElementById("container").innerHTML = content;
</script>
</body>
</html>


Many thanks in advance!
Mike
6:19 pm on Nov 14, 2011 (gmt 0)



Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<div id="container"></div>

<script type="text/javascript">
// set up your iframe url
var ifrmUrl = "http://www.example.com/";

// create an iframe node and set its attributes
var ifrm = document.createElement('iframe');
ifrm.setAttribute('width','800');
ifrm.setAttribute('height','600');
ifrm.setAttribute('frameborder','0');
ifrm.setAttribute('href', ifrmUrl );

// attach the iframe to the container div
var finito=document.getElementById('container');
finito.appendChild(ifrm);

</script>
</body>
</html>


I took the liberty of changing your variable called "url" to ifrmUrl because it always makes me nervous using common coding terms as variable names, so I always avoid variable names like index,url,a,div etc.
9:41 pm on Nov 14, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Thanks for the answer! I copied your code with no changes and created a page, but it didn't work. :(
Any thoughts?
10:11 pm on Nov 14, 2011 (gmt 0)



Ayeee! Sorry, on the last attribute change "href" to "src".
11:19 pm on Nov 14, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Nice working alternative! Thank you. :)
12:43 am on Nov 15, 2011 (gmt 0)



I'm glad it helped Rain_Lover. I should also add that you can give the iframe and id or class using the setAttribute option too. This will allow you to style it and position it with css:

ifrm.setAttribute('id','myFrame');


I suspect there's a tidier way to set all those attributes. I'll have a dig around.

If you're keen on learning JavaScript, check out jQuery. I think you'll enjoy it.
1:15 am on Nov 15, 2011 (gmt 0)



I suspect there's a tidier way to set all those attributes. I'll have a dig around.


Well I did dig around a little (searched using "setting multiple attributes setattribute") but it seems that for a one-off usage like yours, the process I outlined is about right. There are ways to build reusable models but I don't think that's where you're heading.
8:47 pm on Nov 15, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



I'm a JavaScript beginner and have many things to learn.
Thanks again for your time and useful information!