JavaScript Temelleri

Bölüm 18

Belge Çözümleyicisi Nesne Modeli (Browser Object Model) (BOM)

Bölüm 18 Sayfa 8

18.8 - window Nesnesinin frames Alt Nesnesi (Çerçevelerle Çalışmak)

Çerçevelerle çalışmak, belge çözümleyicilerinin gitgide iyileşen desteği ve XHTML 1.1 sürümü DTD sinde çapa elementinin target özelliğinin desteklenmesi ile günümüzde kolaylaşmıştır.

Çerçeveler ile çalışan bir sayfa topluğunda JavaScript programlarının uygulanmasını incelemeden önce, çerçeve topluluklarının düzenlenmesi üzerinde hatırlatıcı bir çalışma yapmak faydalı olacaktır. Çerçeveler, prensip olarak tablolara benzerler. Çerçeveler tablolar gibi satır ve sütünlar halinde düzenlenirler, sadece tablolarda farklı olarak her satır ve sütunda ayrı bir sayfa bulunur. Bu sayfalara çerçeve (frame) adı verilir ve kodlamaları, standart XHTML 1.1 DTD si ile yapılır. Eğer HTML 4.01 veya XHTML 1.0 DTD leri kullanılacaksa, bunların çapaı elementinde target niteliğini destekleyen transitional veya frameset DTD lerinden birisi altında kodlanmaları gereklidir.

Her çerçeve sisteminin düzenini belirleyen bir çerçeve düzenleme sayfası bulunmalıdır. Çerçeve düzenlenme sayfası özel bir sayfadır. Bu sayfanın içeriği görüntülenmez, işlevi sadece çerçevelerin düzenini belitmek ve yani çerçevelerin sayfayı ne şekiilde paylaşacaklarını belirlemektir. Çerçeve düzenlenme sayfasının DTD si ve kodlaması özeldir. XHTML DTD si altında, çerçeve düzenleme sayfasında XHTML frameset DTD si kullanılmalıdır. XHTML 1.1 altında, frameset DTD kullanılması gerekecek tek kullanım yeri çerçeve düzenleme sayfasıdır. Bu sayfanın da görüntülenen bir içeriği yoktur. Bu çok önemlidir, çünkü frameset DTD gevşek kurallı bir DTD dir ve sayfa yazılımında birçok kuralı gözardı eder. Oysa, XHTML in oluşturulma nedeni, sıkı kurallı site yazılımları oluşturmaktır. Gevşek kuralcı frameset DTD si bu amaça ulaşmayı engeller. XHTML 1.0 da karşılaşılan bu zorluk, XHTML 1.1 spesifikasyonu ile aşılmış, sadece düzenleme sayfasında gevşek kuralcı frameset DTD si kullanılması yeterli olmuştur. Bunun da bir içerik değeri yoktur. XHTML 1.1 ile bir çerçeve sistemini oluşturan tüm çerçeveler, sıkı kuralcı XHTML 1.1 DTD si altında yazılabilir hale gelmiştir.

Çerçeve sistemleri sadece bağımsız çerçeve düzenleme sayfaları uygulamaları ile gerçekleştirilmez. Çok az rastlanılsa da, sayfa kodları arasında kullanılan <iframe> elementi de çerçeve düzenleme sayfası olarak hareket eder ve sayfa içine bir çerçeve sistemi yerleştirebilir. Yeni gelişmelerle, <iframe> elementi de güncelliğini yitirmiş sayılmakta ve satıriçi çerçeve sistemleri <object> elementinin içeriği olarak oluşturulabilmektedir. Ayrıca, çerçeve sistemleri, (X)HTML sistemindeki yerleşim modeline uygun olarak, salt JavaScript kodları ile sıfırdan başlanarak da oluşturulabilir. Bu yöntemi de gerektiğinde ilerde uygulayacağız.

Aşağıdaki örnek, bir index.htm düzenleme sayfası ile oluşturulmuş bir çerçeve sistemini göstermektedir. Bu düzenleme sayfasının kodları aşağıda görülmektedir.

<?xml version="1.0" encoding="windows-1254" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr"

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1254" />
<meta http-equiv="Content-Language" content="tr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
<meta name="Title"  content="Webtech JavaScript Turkish Tutorial" />
<meta name="Subject" content="JavaScript Turkish Tutorial" />
<meta name="Description" content="JavaScript Tutorial in Turkish Language" />
<meta name="Keywords" content="JavaScript Tutorial Turkish" />
<meta name="Language" content="tr" />
<meta name="Abstract" content="JavaScript Turkish Tutorial" />
<meta name="Publisher" content="Prof. Dr. Bedri Doğan Emir" />
<meta name="Distribution" content="Local" />
<meta name="Robots" content="Index" />
<title>Frame Control</title>
</head>
<frameset rows="1*, 6*">
<frame src="headline.htm" noresize="noresize" name="headline" scrolling="no" >
<frameset cols="6*, 6*">
<frame src="menu.htm" noresize="noresize" name="menu" scrolling="auto" />
<frame src="main.htm" noresize="noresize" name="anasayfa" scrolling="auto" />
</frameset>
</frameset>
</html>
		

Yukarıdaki çerçeve düzenleme sayfasında XHML 1.0 frameset DTD si kullanılmıştır. Sayfada <body> elementi yerine <frameset> elementi kullanıldığına dikkat ediniz. Bu çerçeve düzenleme sayfasında, çerçeve sisteminin üç tane görüntülenen sayfadan oluşacağı, bunlardan ilki olan headline.htm sayfasının çerçeve sisteminin boyunca tek satır halinde yerleşeceği, geri kalan ikisinin yanyana çerçeve sisteminin ikinci satırına yerleşeceği öngörülmüştür.

Çerçeve düzenleme sayfası olan index.htm in kodlarına dikkat edilecek olursa, çerçeve sistemini oluşturacak her üç alt çerçevenin name niteliğine bir değer verilmiştir. Bu şekilde açılacak sistem pencerelerine bir isim verilmiş olmaktadır. Çerçeve düzenleme sayfası, açaılacak sistem pencerelerine bir isim verilebileceği tek kod sayfasıdır. Bunun dışında hiçbir HTML-XHTML kodlaması ile açılacak sistem pencerelerine bir isim verilemez. Pencere isimlerinden, çerçeve sistemi içinde bağlantıların belirli sayfa hedeflerine (target) yönlendirme için yararlanılacaktır.

Çerçeve düzenleme sayfasının öngördüğü şekilde, çerçeve sisteminin yerleşimi aşağıdaki şemada görüldüğü gibi olacaktır.

Çerçeve Sistemi Yerleşimi
headline.htm
menu.htmmain.htm

Çerçeve sistemi içinde yer alan ve index.htm çerçeve düzenleme sayfasının alt sayfaları konumunda olan çerçeve sayfalarının (frames) sayfa kodları, klasik XHTML 1.1 DTD si altında yazılımaktadırlar ve herhangibir web sayfasının yazılımından hiçbir farkları yoktur. Bu sayfaların bir çerçeve sisteminin alt sayfaları oldukları sadece çerçeve düzenleme sayfasının kodlarından anlaşılabilir.

Bu çerçeve sisteminin ilk alt sayfası olan headline.htm sayfası, çerçeve sisteminin başlığını belirtmek amacı ile yazılmış ve içeriği tek satırdan oluşan bir başlık sayfasıdır. Bu sayfanın kodları aşağıda görülmektedir.

<?xml version="1.0" encoding="windows-1254" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xtml11.dtd">
<html xmlns="http://www.w3.org/1999/06/xhtml" xml:lang="tr"

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1254" />
<meta http-equiv="Content-Language" content="tr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
<meta name="Title"  content="Webtech JavaScript Turkish Tutorial" />
<meta name="Subject" content="JavaScript Turkish Tutorial" />
<meta name="Description" content="JavaScript Tutorial in Turkish Language" />
<meta name="Keywords" content="JavaScript Tutorial Turkish" />
<meta name="Language" content="tr" />
<meta name="Abstract" content="JavaScript Turkish Tutorial" />
<meta name="Publisher" content="Prof. Dr. Bedri Doğan Emir" />
<meta name="Distribution" content="Local" />
<meta name="Robots" content="Index" />
<link rel="stylesheet" type="text/css" href="../css/JSstyle.css" />
<title>headline</title>
</head>
<body>
<p class="chapter">
Belge Çözümleyicisi Nesne Modeli (Browser Object Model) (BOM)
</p>
</body>
</html>
		

Yukarıdaki headline.htm sayfa kodlarından da görüldüğü gibi, çerçeve sisteminin ilk görüntülenen sayfası olan bu sayfanın kodları, normal bir XHTML sayfasının kodlarıdır ve bu sayfanın bir çerçeve sistemine ait olduğunu belirten tek kaynak, çerçeve düzenleme sayfası olan index.htm deki kodlardır.

Çerçeve sisteminin ikinci satırının en solundaki ilk sayfa, menu.htm sayfasıdır. Bu sayfanın işlevi, solundaki içerik sayfası main.htm sayfasındaki konuların bir indeksini tutmak ve konu başlıklarına ilgili bağlantıların tıklanması ile erişim sağlamaktır. Çerçeve sisteminde sonuncu sayfa olan ikinci satırın sağındaki main.htm sayfasının, çerçeve düzenleme sayfası index.htm deki kodlarda verilen name niteliğinin değeri, "anasayfa" olduğundan, çerçeve içindeki her sayfadan çapa elementlerinin hedefi yani target niteliğinin değeri "anasayfa" oldukça, çapa elementi, bağlantıyı main.htm adlı sayfaya yönlendirecektir. Örnek olarak, menu.htm sayfasındaki aşağıdaki gibi, bir bağlantı düzenlemesi,

<a href= "./main.htm#assign" target= "anasayfa">assign Metodu< / a>
		

main.htm sayfasını açacak ve okuma hizasını bu sayfada id niteliğinin değeri assign olan bir sayfa elementinin bulunduğu satıra konumlandıracaktır.

target niteliğinin değeri öntanımlı değerler de olabilir.

Artık çerçeve sistemlerinin JavaScript programlanması açısından incelenmesine başlayabiliriz.

JavaScript window.frames nesnesi, çerçeve sistemi içinde, görüntülenebilen bir pencere nesnesine erişilmesi amacı ile düzenlenmiştir. frames Nesnesi, dizi özelliklerini taşır ve tek özelliği, aynı dizilerde olduğu gibi, dizi uzunluğunu döndüren length özelliğidir. frames Nesnesinin kendine özgü metotları yoktur. Fakat frames nesnesi elemanları çerçeve sistemindeki görüntülenebilen pencereler olduğundan, window nesnesinin tüm özellik ve metotları frames nesnesine de uygulanabilir.

JavaScript açısından, görüntülenebilen bir pencere, çerçeve düzenleme sayfasının bir alt sayfası anlamına gelir ve üst düzeyin özelliklerine window.parent özelliğinden yararlanılarak erişilebilir.

Çerçeve sistemlerinde en üst düzey çerçeve, çerçeve düzenleme sayfasıdır. Bu örnekte, çerçeve düzenleme sayfası olan index.htm en üst düzey çerçeve sayfasıdır. window. frames, özelliği, en üst düzey çerçeve sayfasına ait bir özelliktir ve herhangibir görüntülenebilir alt çerçeve sayfasından, üst düzey çerçeve düzenleme sayfasının window. frames özelliğine, window. parent frames ifadesi ile ulaşılabilir.

JavaScript window.frames nesnesi, aynı önceden görmüş olduğumuz arguments nesnesi gibi dizi benzeri bir nesnedir. Bu dizi benzeri nesnenin elemanları, alt pencereler veya başka bir deyişle alt çerçevelerdir. Bu dizi benzeri nesnenin eleman indisleri hem sayısal hem de sözel olarak uygulanabilir. Bir dizinin eleman indisleri sadece sayısal olabilmesine karşın, dizi benzeri öntanımlı nesnelerin elemanlarına hem sayısal hem de sözel olarak erişilebilir. Bu dizi benzeri nesnenin elemanları açılabilecek görüntülenen pencerelerdir. Bu nesnenin elemlarının sözel indisi, window.frames. name özelliğidir. Bu yapısı ile, window.frames nesnesinin elemanlarına, klasik bir ilişkisel dizi gibi erişilebilir. Bunun için bu nesneye pseudo-dizi adı verilir. Bu pseudo-dizide elemanların indisleri, bir yandan sözel olmakla ile birlikte, dizi elemanları belirgin bir sıralama ile yerleştirilmişlerdir. Bu pseudo- dizide ilk eleman yani sayısal indisi 0 olan eleman, çerçeve düzenleme sayfasında ilk tanıtılan çerçeve, sayısal indisi 1 olan ikinci eleman, ikinci tanıtılmış çerçeve, diğerleri de aynı şekilde sıralanmışlardır. Bu şekilde, istendiğinde bu pseudo- dizinin elemanlarına, ister sözel olarak name özelliğinin değerleri kullanılarak, istenirse sayısal olarak tanıtılma sırası ile erişilebilir. Bu şekilde, window.frames nesnesi, klasik bir ilişkisel diziden daha fazlasını içermektedir.

Örnek olarak, bir alt çerçeve nesnesinden bir başka alt çerçeve nesnesine, istendiğinde köşeli parantez notasyonu ile sözel indislerden yararlanılarak,

window.parent.frames['anasayfa']
		
		

şeklinde, istendiğinde dizi notasyonu ile sayısal indisler kullanılarak

window.parent.frames[2]
		

şeklinde erişilebilir. Sayfa nesnesine erişildiğinde, bu nesnenin bellek referansı bir değişkene aktarılarak ve bu pencere referans değişkeni kullanılarak pencere nesnesinin özelliklerine daha kısa ifadelerle erişme olanağı sağlanabilir. Örnek olarak,

penRef = window.parent.frames[2]
		

şeklinde bir pencere referans değişkeni atadıktan sonra, hedeflenen bu pencerde herhangibir id niteliği olan bir paragrafa,

paragraf = penRef.document.getElementById('idDeğeri');
		

şeklinde erişilebilir. Bu konuda, açıklayıcı tam bir uygulama örneğini, window. frames nesnesinin tek özelliği olan length özelliğinin incelenmesinden sonra göreceğiz.

18.8.1 - frames Nesnesinin Özellikleri

18.8.1.1 - frames Nesnesinin length Özelliği

window.frames nesnesi, dizi yapısında bir nesne olduğundan, elemanları olan çerçevelerin sayısı length özelliğinin değeridir.

/* <![CDATA[  */

function insertAfter(yeniElement, hedefElement) {

var ata= hedefElement.parentNode;

if(ata.lastChild === hedefElement) {

ata.appendChild(yeniElement);
}

else {

ata.insertBefore(yeniElement,hedefElement.nextSibling);
}
}

function başlat() {
var çerçeve = window.parent.frames,
çerçeveSayısı = çerçeve.length,
anaSayfa = çerçeve[2], // veya çerçeve['anasayfa'] veya çerçeve.anasayfa
aktarımYeri= çerçeve.document.getElementById('BOM'),
yeniParagraf = anaSayfa.document.createElement('p'),
metin1 = anaSayfa.document.createTextNode('Çerçeve Düzenleme Sayfası Dışında Görüntülenebilen Sayfa Sayısı : ' + String(çerçeveSayısı)),
metin2 = anaSayfa.document.createTextNode('JavaScript ile Buraya Ekleme Yapıldı !'),
metin3 = anaSayfa.document.createTextNode('menu.htm Sayfasından Bilgi Aktarımı Tamamlandı !'),
ara1 = anaSayfa.document.createElement('p'),
ara2 = anaSayfa.document.createElement('p'),
ara3 = anaSayfa.document.createElement('p');
			
yeniParagraf .classsName = 'cursive-red';

yeniParagraf.appendChild (ara1);
yeniParagraf.appendChild (metin1);
yeniParagraf.appendChild (ara2);
yeniParagraf.appendChild (metin2);
yeniParagraf.appendChild (ara3);
yeniParagraf.appendChild (metin3);

insertAfter(yeniparagrafı, aktarımYeri);
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat , false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}

/* ]]>  */
		

Yukarıdaki programda, bir çerçeve sisteminde çerçevelerden birbirlerine bilgi aktarımı için, pencerereferans değişkenlerinin kullanılması, bilgi aktarımı için kullanılması gereken ifadelerin, önemli ölçüde kısaltılmasına olanak sağladığına dikkat edilmelidir.

Çerçeve sistemlerinin bir başka türü de satıriçi çerçeve sistemi olarak adlandırılan, <iframe>elementinin uygulanması ile oluşturulan çerçeve sistemleridir. iframe>elementi, aynen <object> elementi gibi bir sayfanın elementi olarak kullanılabilir. Satıriçi çerçeve sistemleri çok sık kullanılmaz, fakat birçok durumda uygulanması gerekli olabilir.

Satırıçi çerçeve sistemini oluşturan <iframe> elementi, XHTML 1.1 veya XHTML 1.0 strict DTD altında desteklenmez ve bu sayfalar, w3c doğrulayıcısı tarafından doğrulanmaz. Bu sayfaların doğrulanabilmesi için, XHTML 1.0 transient veya frameset DTD lerin kullanılması gerekir.

Satırıçi çerçeve sisteminin oluşturulduğu bir örneğin sayfa kodları, aşağıda görülmektedir:

<?xml version="1.0" encoding="windows-1254" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1254" />
<meta http-equiv="Content-Language" content="tr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
<meta name="Title"  content="Webtech JavaScript Turkish Tutorial" />
<meta name="Subject" content="JavaScript Turkish Tutorial" />
<meta name="Description" content="JavaScript Tutorial in Turkish Language" />
<meta name="Keywords" content="JavaScript Tutorial Turkish" />
<meta name="Language" content="tr" />
<meta name="Abstract" content="JavaScript Turkish Tutorial" />
<meta name="Publisher" content="Prof. Dr. Bedri Doğan Emir" />
<meta name="Distribution" content="Local" />
<meta name="Robots" content="Index" />
<title>iframebirinci</title>
</head>
<body>
<chapter>
iframe
</chapter>
<iframe src="http://www.google.com" name="çerçeve0" height="350" width="650" id="çv0">
<p>Çerçeveler Desteklenmiyor. Yeni Sürüm Bir Belge Çözümleyici Kullanınız !</p>
</iframe>
<pclass="indent">
<a href="http://www.msn.com">msn</a>
</p>
<p class="indent">
<a href="http://www.google.com">google</a>
</p>
</body>
</html>
		

Burada çerçeve sayfası sadece bir tanedir ve çerçeve0 isimli çerçevedir. Bu sayfada çerçeve içeriğini belirten çapa elementinin target niteliğinin değeri, "çerçeve0" olarak belirtilmiştir.

Ana sayfa olan iframebirinci.htm sayfasına bağlantılı bir JavaScript programında,

window.frames.length
		

değişkeninin değeri 1 dir. Çünkü sadece bir tane görüntülenebilen çerçeve yani <iframe> elementi bulunmaktadır. Burada, window varsayılan global değişken olduğundan, bu değere,

frames.length
		

şeklinde de de erişilebilir. yine sadece bir tane çerçeve sayfası olduğundan, ilkiframe.htm sayfasına bağlantılı bir JavaScript sayfasndan çerçeve sayfasının örnek olarak src niteliğine,

window.frames[0].src
		

veya

window.frames['çerçeve0'].src
		

veya

window.frames.çerçeve0.src
		

şeklinde ulaşılabilir. Bu ifadelerde de, window varsayılan global nesne olduğundan istenirse ihmal edilebilir.

Yukarıda görülen iframebirinci.htm sayfasında, <iframe> elementinin içeriği olarak internet üzerinde yazılımını kontrol edemediğimiz uzak bir sunucudan (WAN = Wide Area Network) indirilen bir sayfa öngörülmüştür. Bu program MSIE 8 tarafından görüntülendiğinde, belge çözümleyicinin ileri-geri navigasyon butonları kullanılması sonucunda, çerçeve içeriğinin ana sayfaya yüklenmesi ile problemi ile karşılaşılır. FireFox ve Safari belge çözümleyicileri, bu sayfaları daha düzenli olarak görüntülemektedirler Bu elementin içeriği olarak, yazılımını kontrol edebildiğimiz kendi sunucumuzdan indirilebilecek bir sayfa öngörülülebilirse, indirilecek sayfada karmaşık scriptler kullanılırak bu sorunun çözümlenme olasılığı olabilir. Fakat, doğal olarak, kullanıcının sayfasında JavaScript yorumlayıcısı çalışmayorsa, bu zorlama scriptleri de çalışmayacaktır ve bu da farkedilmeden kayboluş kuramına uygun olmayacaktır. Bu durumda, satırıçi çerçeve içeriğinin yazılımında belirli önlemler alınabildiği intranet sunucuları dışında sunuculardan indirilecek içeriklerle kullanılmaması daha doğru olacaktır.

Çerçevelerle çalışmak özellikle menu içeren sayfaların daha kolaylıkla yerleştirilmesine olanak sağlayabilir. Çerçeve sistemlerinin özel kodlama yöntemlerine kolaylıkla alışkanlık kazanılabilir.

18.9 - window Nesnesinin frameElement Nesnesi

Bu nesne, sadece bir çerçeve veya <iframe> elementinin içeriği olan sayfalarda, sayfanın pencere referansını döndürür. Eğer kullanıldığı script bir ana sayfada ise, sonuç null olur. Örnek olarak, yazılımı aşağıda görülebilen iframeikinci.htm adlı bir ana sayfayı ele alalım.

<?xml version="1.0" encoding="windows-1254" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1254" />
<meta http-equiv="Content-Language" content="tr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
<meta name="Title"  content="Webtech JavaScript Turkish Tutorial" />
<meta name="Subject" content="JavaScript Turkish Tutorial" />
<meta name="Description" content="JavaScript Tutorial in Turkish Language" />
<meta name="Keywords" content="JavaScript Tutorial Turkish" />
<meta name="Language" content="tr" />
<meta name="Abstract" content="JavaScript Turkish Tutorial" />
<meta name="Publisher" content="Prof. Dr. Bedri Doğan Emir" />
<meta name="Distribution" content="Local" />
<meta name="Robots" content="Index" />
<title>iframeikinci</title>
</head>
<body>
<chapter>
iframe
</chapter>
<iframe src="intranet.htm"height="350" width="650">
<p>Çerçeveler Desteklenmiyor. Yeni Sürüm Bir Belge Çözümleyici Kullanınız.!</p>
</iframe>
</body>
</html>
		

Bu sayfanın içeriği olan intranet.htm adlı kendi sunucumuzdan indirilebilecek sayfanın kodları aşağıda görülmektedir:

<?xml version="1.0" encoding="windows-1254" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1254" />
<meta http-equiv="Content-Language" content="tr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/JavaScript" />
<meta name="Title"  content="Webtech JavaScript Turkish Tutorial" />
<meta name="Subject" content="JavaScript Turkish Tutorial" />
<meta name="Description" content="JavaScript Tutorial in Turkish Language" />
<meta name="Keywords" content="JavaScript Tutorial Turkish" />
<meta name="Language" content="tr" />
<meta name="Abstract" content="JavaScript Turkish Tutorial" />
<meta name="Publisher" content="Prof. Dr. Bedri Doğan Emir" />
<meta name="Distribution" content="Local" />
<meta name="Robots" content="Index" />
<title>Intranet</title>
<script type="text/javascript" src="intranet.js">
</script>
</head>
<body>
</body>
</html>
		

Yukarıda kodları görülen, satırıcı çerçeve içeriği sayfası intranet.htm sayfasına bağlantılı olan JavaScript programının kodları aşağıda görülmektedir:

/* <![CDATA[  */

function başlat() {
var çerçeve = window.frameElement;
			
çerçeve.src = 'http://www.msn.com';
}


// Eğer Belge Çözümleyici FireFox ise (GECKO Motoru)

if (window.addEventListener) {
window.addEventListener('load', başlat , false);
}

// Eğer Belge Çözümleyici Internet Explorer İse

else if (window.attachEvent) {
window.attachEvent('onload', başlat);
}

/* ]]>  */
		

Yukarıda verilmiş olan kodlardan da görüldüğü gibi, çerçeve sayfalarında window.frameElement nesnesi, çerçeve nesnesinin referansını döndürür. Bu nesnenin kullanımı ile çerçeve nesnesinin tüm alt nesneslerine erişim sağlanabilir. Bu nesne sadece <iframe> içeriği veya bir <frameset> tararfından tanımlanmış çerçeve sayfasında çalışabildiği gibi, bir <object> elemanı veya başka belge içerebilen elemanlar tarafından içerilebilen kodlarda da çalışabilir.

Valid XHTML 1.1