Write a dynamic iframe

Forum Moderators: open

Message Too Old, No Replies

Write a dynamic iframe

Rain_Lover

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

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

caffinated

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.

Rain_Lover

9:41 pm on Nov 14, 2011 (gmt 0)

Thanks for the answer! I copied your code with no changes and created a page, but it didn't work. :(
Any thoughts?

caffinated

10:11 pm on Nov 14, 2011 (gmt 0)

Ayeee! Sorry, on the last attribute change "href" to "src".

Rain_Lover

11:19 pm on Nov 14, 2011 (gmt 0)

Nice working alternative! Thank you. :)

caffinated

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.

caffinated

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.

Rain_Lover

8:47 pm on Nov 15, 2011 (gmt 0)

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