IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

Web Yazılımında Dünya Devi olan Google 'ın Frame/Iframe Tekniğini kullanarak Az zamanda çok iyi web siteleri
tasarlanabilir. Bu tekniği Google; Gmail, Google Analytics, Docs and Spreadsheets gibi en iyi web uygulamalarında
ajax 'ın yanında kullanıyor...
Mantığı oldukça basit. İleri Düzeyde DOM kullanmadan, En Basit halini anlatacağım. Eğer vaktimiz olurda sağ kalırsak
tamamını DOM mantığı ile de anlatabilirim

Şimdi. Öncelikle Basit Bir Web Sayfası Oluşturalım.

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]">

<html dir="ltr" lang="tr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />

<title>Iframe Tekniği</title>

</head>

<body>

<form method="post" action="tellme.php" target="secret_iframe">

<input type="text" style="font: bold 11px tahoma;" name="myname" />

<input type="submit" style="font: bold 11px Tahoma;" value="Söyle" />

</form>

<div id="adim">&nbsp;</div>
 

<iframe name="secret_iframe" id="secret_iframe" src="about:blank" style="display: none;"></iframe>

</body>

</html>

Genel yapımız... En alt kısımda gizli bir iframe ve Web Formumuzun "target" kısmını iframemimize yönlendirmek..
Eğer bu kısmı tam olarak anladıysanız bir sonraki kısmı da tahmin edebiliyorsunuz demektir.
Şimdi formdaki tellme.php Dosyasını yazalım..

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]">

<html dir="ltr" lang="tr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />

<script type="text/javascript">

<!--

window.onload = function()

{

 //ana sayfadaki adim adlı elementin içeriğini Buradaki Content içeriği ile değiştireceğiz

 parent.document.getElementById('adim').innerHTML = document.getElementById('content').innerHTML;

 //Myname Inputunu temizliyoruz.

 parent.document.getElementById('myname').value = '';

};

//-->

</script>

</head>

<body>

<div id="content">

<?php

$myname = strval(trim($_POST['myname']));

echo "<div style=\"padding: 5px; font: bold 14px Verdana; color: white; background: red; width: 150px\">Benim Adım: " . $myname . "</div>";

?>

</div>

</body>

</html>

Burada content id 'li div katmanına adı yazdırdırıyoruz. Sayfa yüklenir yüklenmez de "window.onload" eventi
bizim anasayfamızdaki "adim" id 'li div katmanına yazdırıyoruz.
Alın size AJAX 'a alternatif. Sayfa yenilenmeden dinamik içerik :) İstenirse devamını anlatırım. Fakat şimdilik bu kadar.

Örnek:

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Screenshot:

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]