DeviLib - library about web, IT, programming and web design

Behind The Scenes - Using Iframe

As the web 2.0 is becoming increasingly popular, it is almost a must to learn and apply ajax technologies. Is it really important? The answer is clear – Yes. However, the convenience of ajax (from the point of the view of a user) is possible to replace by the identical methods. What is ajax for? It is a redirection to a distant server not reloading the whole current page, just the certain part of it. This function we already know and it is assigned to one of the html elements such as iframe. The only thing we have to know is how to make it properly do some some certain actions.

Iframe

Let‘s say we need to check the entered name of the user in the data base and return the answer about the status of the user. We are going to need two files for that – the main (main.php) which the user can see and the suplementary one which will do the main action (side.php) and which is not seen by the user.

We hide iframe from the user in the main.php and render the form with the one field to enter the user‘s name including text container and mark it “res” id. No JavaScript code is necessary in this page.


<html>

<head><title>main</title></head>

<body> <div id="res">Input your name: </div>

<iframe src="" style="display:none;width:0px;height:0px;" id="ifr" name="ifr"></iframe>
<form action="side.php" method="post" target="frm">
<div><input type="text" name="name" /></div>
<div><input type="submit" value="Check" /></div>
</form>
</body>
</html>

By entering “check” script is applying the side.php through the hidden iframe which is denoted by the reference “target”.
Create a proper html document in the side.php and use JavaScript to format it.


<html>
<head>
<title></title>
<script type="text/javascript">
//parent document, which user see
var par = window.parent.document;
<?php
//starting php check
if(isset($_POST['name']) && strlen($_POST['name'])>2){
$status = 'Offline';
$name= htmlspecialchars($_POST['name']);
/*in this place we are checking variable $name, is he online or not.
In reality e can connect to database and do additional checks.
For now let's say that users is online, then with php help we will print javascript code
(witch locates between <script> and </script>) */
$status = 'Online';
echo'par.getElementById("res").innerHTML="User '.$name.' in this moment is '.$status.'";';
}

?>

</script>
</head>
<body></body>
</html>

That‘s about all. The only thing we needed here was to change parent element‘s content in the side.php by using JavaScript. In order to do that it is enough to have even the basics of JavaScript. What is the profit of this method? Well, actually nothing, but the shorter code. And I could not think of any other reason in here. Anyway there is good to know several ways in achieving the goals.

P.S. using the iframe may cause some problems of validating xhtml, thus in order to avoid this, change doctype to “XHTML 1.0 Transitional”.

Related posts:

  1. 3 Responses to “Behind The Scenes - Using Iframe”

  2. By Kazelraw on May 24, 2008 | Reply

    Hi!sfrw! http://dpjkfwmf.com zljxb uncmn http://yplnmfdo.com nhtaj uxeju

  3. By Kazelffv on May 24, 2008 | Reply

    Hi! adffi vvjai ofjmv vcdin

  4. By Kazelbxq on May 24, 2008 | Reply

    Hi! jtbgp fnuri mfcts dlxhf

Post a Comment