Full screen iFrame code

boyfrom75

05-23-2012, 05:25 AM

What is the difference between this 2 codes.. The first code works fine for a full screen iframe and the other code too.. So why should I use the second code.? is there something special..? why the code is so long ? Is important to ad CSS in this page...? Is the CSS doing something special...? Im confused I dont see the difference...

First example
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></head><body bgcolor="#000000">
<iframe name='myiframe' id='myiframe' src='http://www.mywebsite.com'
style='position:absolute; top:0px; left:0px; width:100%; height:100%;
z-index:999' onload='sendParams();' frameborder='no'>
</iframe>
</body></html>

VS

Second example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Full Screen Iframe</title>
<style type="text/css">
html
{
overflow: auto;
}

html, body, div, iframe
{
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}

iframe
{
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>

<iframe id="tree" name="myiframe" src="http://mywebsite.com" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>

</body>
</html>

boyfrom75

05-23-2012, 05:39 AM

Well, I dont like the second code because it has a "scroll bar".. but anyways..even with out the scroll bar,
I still dont know if will be a better option using the second code..

dan-dan

05-23-2012, 08:27 AM

I think this is a bad comparrison to demonstrate the benifits of CSS. The two examples aren't the same, each containing different styles, extra styles, extra HTML etc.

Consider this CSS example. All the styles for the HTML document and iframe are contained within the CSS in the head of the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Full Screen Iframe</title>
<style type="text/css">

body, iframe
{
margin: 0px;
padding: 0px;
}

iframe
{
width: 100%;
height: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
border: 0;
margin: 0;
}
</style>
</head>
<body>

<iframe name="myiframe" src="http://mywebsite.com"></iframe>

</body>
</html>

Now with only HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Full Screen Iframe</title>

</head>
<body style="margin:0px; padding:0px;>

<iframe name="myiframe" src="http://mywebsite.com" frameborder="no" scrolling="auto" marginheight="0" marginwidth="0" width="100%" height="100%"></iframe>

</body>
</html>

The second one may appear simpler, but lets create a senario. Lets say you have a website with 30 pages and each one has an iframe. You decide you actually want the iframe to cover only 90% of the page width and height and for it to have a border. It's only 3 things to change, but over 30 pages that 90 changes.
Were you to use the first example you'd simply change the values on the one simple style (of course we'd probably be using an external stylesheet in reality) and EVERY page would be effected.