Write a dynamic iframe

**Rain Lover** · 11-11-2011, 06:44 PM

Hi,

I wonder if the following is coded correctly:

Code:

<!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

**molendijk** · 11-12-2011, 01:19 AM

It should be:

Code:

<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>

Apart from that, this is not dynamic coding. It's the same as writing the iframe directly to the page.
If you want to dynamically write the iframe to the page, you would do something like:

Code:

<head> 
<script type="text/javascript">
function dynamic_iframe(id,content)
{
document.getElementById(id).innerHTML = "<iframe width='800' height='600' frameborder='0' src=" + content +"><\/iframe>";
}
</script>
</head> 
<body> 
<a href="javascript: void(0)" onclick="dynamic_iframe('container', 'http://www.example.com')">load</a>
<div id="container"></div>
</body>

Of course, the onclick could be replaced with an onload.
===
Arie Molendijk.

**Rain Lover** · 11-12-2011, 04:49 PM

Originally Posted by molendijk

It should be:.....

Thanks for the answer and correction! But there's something I don't understand: I put the variable in single quotation marks -- just like the other attributes values. What's wrong with it?

Of course, the onclick could be replaced with an onload.

Is that what you mean:

Code:

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

**Rain Lover** · 11-12-2011, 05:27 PM

One more question regarding using plus signs, please:

Code:

"<iframe height='600' frameborder='0' src=" + content + " width=" + value + "><\/iframe>"

Is the above correct if there are two iframe variables?

**molendijk** · 11-12-2011, 06:00 PM

Originally Posted by Rain Lover

Thanks for the answer and correction! But there's something I don't understand: I put the variable in single quotation marks -- just like the other attributes values. What's wrong with it?

The other values are (fixed) constants, so they are put between appropriate quotation marks. But the url is a variable, and therefor isn't put between quotation marks.
To be more precise:
- we have two main 'constant-strings':
<iframe width='800' height='600' frameborder='0' src= and ><\/iframe> which should both be put between quotation marks. We used " " for it here.
- within the first string, we have 'sub-constants' for width, height and frameborder. Being constants, they must put between quotation marks too. As we have already used "" for the first main constant, we have to use other marks for the sub-constants: ' '.

Originally Posted by Rain Lover

Is that what you mean:

Code:

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

Yes, that's what I mean.
===
Arie.

**molendijk** · 11-12-2011, 06:07 PM

Originally Posted by Rain Lover

One more question regarding using plus signs, please:

Code:

"<iframe height='600' frameborder='0' src=" + content + " width=" + value + "><\/iframe>"

Is the above correct if there are two iframe variables?

Yes, that's perfect. So now you can do something like:

Code:

<head> 
<title>Sample Page</title>
<script type="text/javascript">
function dynamic_iframe(id,content,value)
{
document.getElementById(id).innerHTML = "<iframe height='600' frameborder='0' src=" + content + " width=" + value + "><\/iframe>";
}
</script>
</head> 
<body onload="dynamic_iframe('container', 'http://www.example.com', '900px');"> 
<div id="container"></div>
</body>

Arie.

**Rain Lover** · 11-12-2011, 06:17 PM

Very informative! Thank you!

Thread: Write a dynamic iframe

Thread Tools

Search Thread

Write a dynamic iframe

The Following User Says Thank You to molendijk For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions