homepage Welcome to WebmasterWorld Guest from 54.196.225.45
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Write a dynamic iframe
Rain_Lover




msg:4386033
 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




msg:4386828
 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




msg:4386890
 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




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

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

Rain_Lover




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

Nice working alternative! Thank you. :)

caffinated




msg:4386965
 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




msg:4386978
 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




msg:4387345
 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved