PDA

View Full Version : Write a dynamic iframe



Rain Lover
11-11-2011, 06:44 PM
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

molendijk
11-12-2011, 01:19 AM
It should be:

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

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


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


"<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
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: ' '.


Is that what you mean:

<!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
One more question regarding using plus signs, please:

"<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:
<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! :)