Welcome to WebmasterWorld Guest from 54.196.232.162

Forum Moderators: open

Message Too Old, No Replies

Write a dynamic iframe

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

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 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
6:19 pm on Nov 14, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 1, 2010
posts: 95
votes: 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)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


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)

Junior Member

5+ Year Member

joined:Sept 1, 2010
posts: 95
votes: 0


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

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


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

Junior Member

5+ Year Member

joined:Sept 1, 2010
posts: 95
votes: 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)

Junior Member

5+ Year Member

joined:Sept 1, 2010
posts: 95
votes: 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)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members