Google Frame/Iframe Tekniği - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

07 Temmuz 2007, 10:09

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: Kodu kopyalamak için üzerine çift tıklayın!

<!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: Kodu kopyalamak için üzerine çift tıklayın!

<!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
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
İ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...]

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
GoogLe iframe virüsü	BugraBoran	Google	1	10 Mayıs 2010 17:26
Iframe Virusunun Google Index'ine Etkisi ve Çözümü	Agathadaimon	Google	0	05 Mart 2010 11:19

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.