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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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"> </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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:
[Linkleri sadece kayıtlı üyeler görebilir Kayıt olmak için buraya tıklayın]
Screenshot:
[Linkleri sadece kayıtlı üyeler görebilir Kayıt olmak için buraya tıklayın]
[Linkleri sadece kayıtlı üyeler görebilir Kayıt olmak için buraya tıklayın]
alıntı