Îêíà è ôðåéìû
Ñîçäàíèå íîâîãî îêíà è äîñòóï ê íåìó
Áîëüøèíñòâî ñîâðåìåííûõ ñàéòîâ íå èñïîëüçóþò ôðåéìû è ìíîãî÷èñëåííûå îêíà (â ÷àñòíîñòè, âñïëûâàþùèå), è ïðè÷èí ýòîìó ìíîãî.  ÷àñòíîñòè, èñïîëüçîâàíèå âñïëûâàþùèõ îêîí îãðàíè÷èâàåòñÿ ïàíè÷åñêîé áîÿçíüþ ìíîãèõ ïîëüçîâàòåëåé (è çëîóïîòðåáëåíèåì ýòèìè îêíàìè äëÿ ðåêëàìû), à ôðåéìû íàðóøàþò ñòðóêòóðó ñòðàíèöû, è ïðîèçâîäÿò åùå ìàññó ïðîáëåì, ñâÿçàííûõ ñ èíäåêñèðîâàíèåì ñàéòîâ.  òî æå âðåìÿ, íåêîòîðûå ïðèëîæåíèÿ äî ñèõ ïîð ïîëüçóþòñÿ óäîáñòâîì ôðåéìîâ äëÿ ñîçäàíèÿ íàâèãàöèîííûõ ìåíþ è ìîùüþ âñïëûâàþùèõ îêîí êàê èíòåðôåéñíûõ ýëåìåíòîâ, è êàê ïðèìåð ýòîìó – ñèñòåìà äëÿ óïðàâëåíèÿ áàçîé äàííûõ PhpMyAdmin.
ß íè â êîåé ìåðå íå áóäó ðåêîìåíäîâàòü âàì èñïîëüçîâàòü ôðåéìû è âñïëûâàþùèå (è ïðîñòî ìíîæåñòâåííûå) îêíà â ñâîèõ ïðèëîæåíèÿõ. Íî ñâåäåíèÿ î íèõ ìîãóò ïðèãîäèòüñÿ ïðè ðàçáîðå ÷óæèõ ñêðèïòîâ è ñîçäàíèè ñâîèõ.
Ñîçäàíèå íîâîãî îêíà è äîñòóï ê íåìó
Äëÿ ñîçäàíèÿ íîâîãî äî÷åðíåãî îêíà îáúåêò window, ñàì ïðåäñòàâëÿþùèé îêíî, ñîäåðæèò âñåãî îäíó ôóíêöèþ – open(). Íåñìîòðÿ íà êàæóùóþñÿ ïðîñòîòó, ýòà ôóíêöèÿ ïîçâîëÿåò îïðåäåëÿòü öåëóþ ãðóïïó ïàðàìåòðîâ è ñâîéñòâ ñâåæåñîçäàííîãî îêíà.
Ïðè ïðîñòåéøåì âûçîâå – òî åñòü, âûçîâå window.open() ïðîèçîéäåò òî æå ñàìîå, ÷òî è ïðè íàæàòèè Control-N èëè Control-T â áðàóçåðå (íó, ñ òåì èñêëþ÷åíèåì, ÷òî áðàóçåð íà÷íåò âîçìóùàòüñÿ ïî ïîâîäó âñïëûâàþùèõ îêîí – íóæíî áóäåò åãî óñïîêîèòü è ñêàçàòü ÷òî âñå â ïîðÿäêå). Òî åñòü – îòêðîåòñÿ íîâîå îêíî èëè âêëàäêà áðàóçåðà, êîòîðàÿ áóäåò èìåòü ðàçìåðû ïî óìîë÷àíèþ, è ñîäåðæàòü about:blank
Äëÿ òîãî, ÷òîáû çàãðóçèòü â îêíî äàííûå, åñòü íåñêîëüêî (äóìàþ, âû óæå ïðèâûêëè) ñïîñîáîâ.
Ïåðâûé – ýòî óêàçàòü ïðè îòêðûòèè îêíà URL, êîòîðûé áóäåò çàãðóæåí â ýòî îêíî. Äåëàåòñÿ ýòî ïðè ïîìîùè óêàçàíèÿ ïåðâîãî ïàðàìåòðà – ñòðîêè ñ íóæíûì URL. Òîãäà ïîñëå îòêðûòèÿ ýòîò URL áóäåò çàïðîøåí áðàóçåðîì, êàê åñëè áû âû âáèëè åãî â ñòðîêó àäðåñà è íàæàëè Enter.
Âòîðîé ñïîñîá íåñêîëüêî ñëîæíåå, è îñíîâàí íà ñâÿçè îñíîâíîãî îêíà ñ äî÷åðíèì.
Äëÿ òîãî ÷òîáû èì âîñïîëüçîâàòüñÿ íóæíî ðåçóëüòàò ôóíêöèè open() çàíåñòè â ïåðåìåííóþ.
Òåïåðü ýòà ïåðåìåííàÿ ïðåäñòàâëÿåò íîâîå îêíî – òî åñòü, äëÿ ðàáîòû ñ äîêóìåíòîì íîâîãî îêíà òåìè ñïîñîáàìè, êîòîðûå âàì óäîáíåå (è êîòîðûå âû èçó÷àëè äî ýòîãî) äîñòàòî÷íî èñïîëüçîâàòü ñâîéñòâî document ýòîé ïåðåìåííîé. Ê ñîæàëåíèþ, âòîðîé ñïîñîá ñîïðÿæåí ñ ìàññîé íåóäîáñòâ. Îñíîâíîå íåóäîáñòâî ñîñòîèò â òîì, ÷òî ôóíêöèÿ open() âûïîëíÿåòñÿ àñèíõðîííî. Òî åñòü íèêòî íå ìîæåò ãàðàíòèðîâàòü, ÷òî ïîñëå åå âûçîâà ó ñîçäàííîãî îêíà áóäåò document – îí ìîæåò ïîÿâèòüñÿ ÷åðåç ñåêóíäó, íàïðèìåð. Îáðàùåíèå æå ê íåñîçäàííûì îáúåêòàì (äàæå õóæå – ê íàïîëîâèíó ñîçäàííûì) ìîæåò âûçâàòü íåêîòîðûå ïðîáëåìû.  ìîåì ñëó÷àå ýòî áûëî çàâèñàíèå áðàóçåðà FireFox, è ïðîñòî îøèáêà â áðàóçåðå Internet Explorer
Ïîýòîìó ÷àùå âñåãî èñïîëüçóåòñÿ ñìåøàííàÿ òåõíèêà – ñíà÷àëà çàãðóæàåòñÿ óæå ãîòîâûé HTML-êîä, à ïîñëå ýòîãî îñóùåñòâëÿåòñÿ äîñòóï ê íåìó ïðè ïîìîùè ðåçóëüòàòà ðàáîòû ôóíêöèè open().
Ñâÿçü îêîí íå îãðàíè÷èâàåòñÿ äîñòóïîì ê äî÷åðíåìó îêíó èç îñíîâíîãî. Âîçìîæåí òàêæå è îáðàòíûé äîñòóï – ê ãëàâíîìó èç äî÷åðíåãî. Ýòîò ñïîñîá äîñòóïà èñïîëüçóåòñÿ äàæå ÷àùå – äî÷åðíåå îêíî îòïðàâëÿåò äàííûå ãëàâíîìó.
Ôóíêöèÿ open() èìååò ñëåäóþùèå ïàðàìåòðû:
-
URL. Ýòîò ïàðàìåòð óæå óïîìèíàëñÿ, îí ñëóæèò óêàçàíèåì, êàêîé äîêóìåíò çàãðóæàòü.
-
Íàçâàíèå îêíà èëè çíà÷åíèå àòðèáóòå target. Ïî íåèçâåñòíîé ìíå ïðè÷èíå, ýòîò ïàðàìåòð ïîçâîëÿåò êàê óêàçàòü, â êàêîì target îòêðûâàòü îêíî, òàê è óêàçàòü èìÿ íîâîãî îêíà. Åñëè ïåðâîå èñïîëüçîâàíèå âàì äîëæíî áûòü çíàêîìî åùå ïî ÿçûêó HTML (òî åñòü â äàííîì ñëó÷àå îíî ðàáîòàåò êàê òîò æå target ó ññûëêè), òî ñëó÷àé, êîãäà ýòîò ïàðàìåòð îáîçíà÷àåò èìÿ îêíà íóæíî ïîÿñíèòü. Äåëî â òîì, ÷òî êàæäîå îêíî áðàóçåðà ìîæåò èìåòü èìÿ, ïðè÷åì ýòî èìÿ íå ñâÿçàíî ñ title îêíà èëè äðóãèìè ïàðàìåòðàìè. Åñëè îêíî ñ óêàçàííûì èìåíåì óæå ñóùåñòâóåò, òî îíî íå áóäåò çàíîâî îòêðûòî.
-
Òðåòèé ïàðàìåòð ïðåäñòàâëÿåò èç ñåáÿ ñïèñîê «ñïåöèôèêàöèé» îêíà, ðàçäåëåííûõ çàïÿòûìè (íàïðèìåð, 'width=200,height=100'). Íàñòðîåê ó îêíà äîâîëüíî ìíîãî, õîòÿ íå âñå îíè ðåàëèçîâàíû âî âñåõ áðàóçåðàõ. Íàèáîëåå îáùèå èç íèõ – ýòî height, width, left, top (ýòè ïàðàìåòðû óïðàâëÿþò ðàçìåðàìè îêíà è ïîëîæåíèåì îòíîñèòåëüíî âåðõíåãî ëåâîãî óãëà ýêðàíà), à òàêæå location, menubar è toolbar (ýòè ïàðàìåòðû îïðåäåëÿþò, ïîêàçûâàòü ëè ýëåìåíòû îôîðìëåíèÿ áðàóçåðà, òàêèå êàê ïàíåëü àäðåñà èëè ìåíþ).
Äëÿ òîãî ÷òîáû ïðîäåìîíñòðèðîâàòü òåõíèêè ðàáîòû ñ äî÷åðíèìè îêíàìè, ÿ ïðåäëàãàþ ñëåäóþùóþ çàäà÷ó (ïðåäëàãàþ, åñòåñòâåííî, ñåáå, òàê êàê ÿ æå è áóäó åå ðåøàòü):
HTML-êîä ñîäåðæèò êíîïêó ñèíõðîíèçàöèè ôîðì; ïðè îòêðûòèè ïðîãðàììíî îòêðûâàþòñÿ äâà îêíà (ñ îäíèì è òåì æå êîäîì); ïðè íàæàòèè íà êíîïêó ñèíõðîíèçàöèè äàííûå ôîðìû ïåðåíîñÿòñÿ â ñîñåäíåå îêíî.
Ñîçäàâàòü áîëüøóþ ôîðìó ÿ íå áóäó – âû âåäü è òàê óæå óìååòå ðàáîòàòü ñ ôîðìàìè. Âìåñòî ýòîãî ôîðìà áóäåò ñîäåðæàòü ïðîñòîå òåêñòîâîå ïîëå.
Ñàìûé áîëüøîé èíòåðåñ ïðåäñòàâëÿåò îáìåí èíôîðìàöèåé ìåæäó îêíàìè – òàê êàê îêíà ñîäåðæàò àáñîëþòíî èäåíòè÷íûé êîä, îíè áóäóò «äîãîâàðèâàòüñÿ» êòî èç íèõ ãëàâíîå, à êòî äî÷åðíåå, è âåñòè ñåáÿ ñîîòâåòñòâåííî. Îñíîâíûå ïðåèìóùåñòâà òàêîãî ìåòîäà – íå íóæíî áåñïîêîèòüñÿ, ÷òî äî÷åðíåå îêíî ìîæåò çàãðóçèòüñÿ ðàíüøå ãëàâíîãî, è âåñü êîä ñîäåðæèòñÿ â îäíîì ìåñòå. Íåäîñòàòêè – â îäíîì è òîì æå êîäå ñîäåðæàòñÿ ôóíêöèè êàê îñíîâíîãî, òàê è äî÷åðíåãî îêíà.
Èòàê, äëÿ íà÷àëà, HTML-êîä. ß áóäó èñïîëüçîâàòü óæå çíàêîìûé âàì àòðèáóò onClick äëÿ âûçîâà ôóíêöèè ñèíõðîíèçàöèè ïî íàæàòèþ êíîïêè.
<html> <head> <script type="text/javascript" src="sync.js"></script> </head> <body> <textarea id="sync_value"></textarea> <input type="button" id='btn' value="Sync" onClick="sync_func();" disabled='disabled' /> </body> </html>
Êàê âû âèäèòå, êîä òðèâèàëüíûé, è â ïîÿñíåíèÿõ íå íóæäàåòñÿ.
Îñíîâíóþ ðàáîòó áåðåò íà ñåáÿ âêëþ÷àåìûé ñêðèïò.
Ñòðóêòóðà ñêðèïòà áóäåò óæå íå òàêîé òðèâèàëüíîé. Êàê è ðàíüøå, ðàçîáúåì çàäà÷ó íà íåñêîëüêî ïîäçàäà÷.
 íàøåì ñêðèïòå äîëæíû áûòü ñëåäóþùèå âîçìîæíîñòè:
-
Ïðîâåðêà, ÿâëÿåòñÿ ëè îêíî äî÷åðíèì (òî åñòü áûëî ëè îíî îòêðûòî èç äðóãîãî îêíà).
-
Ôóíêöèÿ çàïèñè çíà÷åíèÿ ôîðìû â äî÷åðíåå îêíî
-
Ôóíêöèÿ çàïèñè çíà÷åíèå ôîðìû â ãëàâíîå îêíî
Åñòåñòâåííî, ïîâåäåíèå êîäà áóäåò çàâèñåòü îò òîãî, ãëàâíîå ýòî îêíî èëè äî÷åðíåå.
Äëÿ ïðîâåðêè «ïîä÷èíåííîñòè» îêíà áóäåò èñïîëüçîâàòüñÿ îäíî èç ñâîéñòâ îáúåêòà window – opener. Ýòî ñâîéñòâî ñîäåðæèò ññûëêó íà îáúåêò îòêðûâøåãî îêíà, åñëè òàêîå èìååòñÿ, èëè null, åñëè îêíî áûëî îòêðûòî ïîëüçîâàòåëåì, à íå ñêðèïòîì.
Äëÿ òîãî ÷òîáû èñêëþ÷èòü îøèáêè, ôóíêöèÿ ïðîâåðêè è îòêðûòèÿ îêíà áóäåò êðîìå âñåãî ïðî÷åãî óâåäîìëÿòü ãëàâíîå îêíî, ÷òî äî÷åðíåå óæå îòêðûëîñü.
Äëÿ ñòàðòîâûõ ïðîâåðîê è óñòàíîâîê ìîæíî èñïîëüçîâàòü òàêîé êîä:
var is_child = false;
var child_window;
function init() {
is_child = (window.opener != null);
if (is_child) {
window.opener.ready();
ready();
} else {
child_window = window.open('test.html', 'child');
}
}
function ready() {
document.getElementById('btn').disabled=false;
}
Äëÿ òîãî ÷òîáû êîä îòðàáîòàë, íóæíî âûçâàòü ôóíêöèþ init(), ïðè÷åì ñðàçó ïîñëå òîãî êàê áóäóò çàãðóæåíû âñå îñòàëüíûå ýëåìåíòû. Íàïðèìåð, ìîæíî ðàçìåñòèòü â ñàìîì êîíöå òåëà äîêóìåíòà (ïåðåä çàêðûâàþùèì òåãîì body) âûçîâ ýòîé ôóíêöèè, âñòàâèâ ñòðî÷êó
<script type="text/javascript"> init(); </script>
Åñëè ñåé÷àñ îòêðûòü ïîëó÷åííûé äîêóìåíò (äà, ê ñëîâó – îí äîëæåí íàçûâàòüñÿ test.html) – òî âû óâèäèòå äâà îêíà, â êîòîðûõ êíîïêè ïîñëå çàãðóçêè äîêóìåíòîâ ñòàíóò àêòèâíûìè.
Íåêîòîðûå èç ñòðî÷åê ÿ ïîÿñíþ.
Êàæäîå îêíî ñâÿçàíî ñî ñâîèì îáúåêòîì window. Ñîîòâåòñòâåííî, íàáîðû ãëîáàëüíûõ ïåðåìåííûõ â êàæäîì îêíå (òàê êàê ãëîáàëüíûå ïåðåìåííûå – ýòî ïðîñòî ñâîéñòâà îáúåêòà window) áóäóò ðàçíûìè. Ïîýòîìó óñòàíîâêà ïåðåìåííîé is_child ðàâíîé true â îäíîì îêíå ñîâåðøåííî íå çíà÷èò, ÷òî â äðóãîì îêíå îíà òîæå áóäåò true.
 ýòîì îòíîøåíèè îêíà àáñîëþòíî íåçàâèñèìû – âû òàêæå íå ñìîæåòå âûçâàòü ôóíêöèþ îäíîãî îêíà â äðóãîì îêíå, è òàê äàëåå. Åäèíñòâåííîå, ÷òî ìîæåò ñâÿçàòü äâà îêíà – ýòî èëè ñâîéñòâî window.opener (èëè åùå íåñêîëüêî ñâîéñòâ â ñëó÷àå ôðåéìîâ), èëè èñïîëüçîâàíèå çíà÷åíèÿ, âîçâðàùàåìîãî ôóíêöèåé open().
Òàê ÷òî ïðè îáúÿâëåíèè ôóíêöèé, ñîçäàíèè ïåðåìåííûõ è îáúÿâëåíèè êëàññîâ íå íóæíî áîÿòüñÿ «çàöåïèòü» äðóãîå îêíî – ýòî ìîæíî ñäåëàòü òîëüêî ñïåöèàëüíî.
Êàê âû âèäèòå, ñíà÷àëà ïåðåìåííàÿ is_child ðàâíà false – òî åñòü îêíî ñ÷èòàåòñÿ ñàìîñòîÿòåëüíûì. Ôóíêöèÿ init() ïðîâåðÿåò, ÿâëÿåòñÿ ëè îêíî äî÷åðíèì – âîò ýòîé ñòðî÷êîé:
is_child = (window.opener != null);
ß èñïîëüçîâàë ãëîáàëüíóþ ïåðåìåííóþ, òàê êàê äðóãèå ôóíêöèè òîæå áóäóò ê íåé îáðàùàòüñÿ.
Äàëåå, åñëè îêíî îêàçàëîñü îñíîâíûì – âûïîëíÿåòñÿ îòêðûòèå íîâîãî îêíà, è ïðèñâîåíèå ýòîãî îêíà ïåðåìåííîé child_window. Åñëè ïðèñâîåíèå íå äåëàòü, òî íîâîå îêíî áóäåò íåäîñòóïíî.
 ñëó÷àå æå, åñëè îêíî äî÷åðíåå, âûïîëíÿþòñÿ äåéñòâèÿ ïîèíòåðåñíåå.
Êîíñòðóêöèÿ
window.opener.ready();
âûçûâàåò ôóíêöèþ ready() äëÿ îêíà-ðîäèòåëÿ. Ýòà ôóíêöèÿ áóäåò ðàáîòàòü ñ ãëîáàëüíûìè ïåðåìåííûìè áàçîâîãî îêíà, òî åñòü âñå äåéñòâèÿ áóäóò âûïîëíÿòüñÿ â êîíòåêñòå òîãî îêíà, êîòîðîå îòêðûëî òåêóùåå.
Ïîñëå ýòîãî âûçûâàåòñÿ òà æå ôóíêöèÿ (íà ñàìîì äåëå – ýòî àáñîëþòíî äðóãàÿ ôóíêöèÿ, òîëüêî îíà íàçûâàåòñÿ òàê æå è ó íåå òàêîé æå òåêñò – íî ýòî, ïîâòîðþñü, äâå ðàçíûå ôóíêöèè, ïðèìåðíî êàê áðàòüÿ-áëèçíåöû) äëÿ òåêóùåãî îêíà.  ýòîì ñëó÷àå ññûëêà íà window óæå íå óêàçûâàåòñÿ äëÿ óïðîùåíèÿ – ýòî è òàê ïîäðàçóìåâàåòñÿ.
 ôóíêöèè ready() íè÷åãî îñîáåííîãî íåò – îíà ïðîñòî ïîäãîòàâëèâàåò êîä ê ðàáîòå (è âûçûâàåòñÿ òîëüêî òîãäà, êîãäà îáà îêíà îòêðûòû è âñå îáúåêòû â íèõ ñîçäàíû). Äðóãèìè ñëîâàìè, îíà óáèðàåò àòðèáóò disabled ó êíîïîê (òî÷íåå, îòêëþ÷àåò ïóòåì ïðèñâîåíèÿ ýòîìó àòðèáóòó ëîãè÷åñêîãî íóëÿ).
Ñëîæíàÿ ÷àñòü ðàáîòû âûïîëíåíà, îñòàëèñü ìåëî÷è – ñèíõðîíèçàöèÿ.
Çäåñü ìû áóäåì èñïîëüçîâàòü óæå ïîëó÷åííóþ ïåðåìåííóþ is_child, è, â çàâèñèìîñòè îò åå çíà÷åíèÿ, èëè èçìåíÿòü ñîäåðæèìîå ýëåìåíòîâ window.opener, èëè ýëåìåíòîâ child_window
Âîò òàê ïðèìåðíî âûãëÿäèò ôóíêöèÿ ñèíõðîíèçàöèè:
function sync_function() {
var value;
value = document.getElementById('sync_value').value;
if (is_child) {
window.opener.document.getElementById('sync_value').value = value;
} else {
child_window.document.getElementById('sync_value').value = value;
}
}
Òóò òîæå âñå òðèâèàëüíî – ñíà÷àëà çíà÷åíèå áåðåòñÿ èç òåêñòîâîãî ïîëÿ òåêóùåãî îêíà, à ïîòîì çàïèñûâàåòñÿ â òåêñòîâîå ïîëå äðóãîãî îêíà.
Òåêñòîâîå ïîëå èùåòñÿ ïî ID – òàê êàê ó íàñ íåò ôîðìû, òî ïîëó÷èòü äîñòóï ÷åðåç ìàññèâ forms íå âûéäåò.
Ìîæåòå ïðîâåðèòü ðàáîòó ýòîãî ñêðèïòà, îòêðûâ äâà îêíà òàê ÷òîáû îíè íå ïåðåêðûâàëè äðóã äðóãà.
Âû ìîæåòå çàìåòèòü çàáàâíóþ âåùü – åñëè â äî÷åðíåì îêíå îòêðûòü äðóãóþ ñòðàíèöó (íàïðèìåð, ÿíäåêñ), à ïîòîì îïÿòü test.html, òî ñêðèïò ïðîäîëæèò ðàáîòó. À åñëè â òî âðåìÿ, ïîêà ÿíäåêñ áóäåò îòêðûò, ïîïðîáîâàòü ñèíõðîíèçèðîâàòü îêíà, òî áðàóçåð âûäàñò ñîîáùåíèå îá îøèáêå – íî íå íåâîçìîæíîñòü íàéòè ýëåìåíò, à îøèáêó äîñòóïà. Ýòî ñäåëàíî äëÿ òîãî, ÷òîáû ñêðèïòû èç ðàçíûõ äîìåíîâ íå ìîãëè äðóã íà äðóãà ïîâëèÿòü è ñäåëàòü ÷òî-ëèáî íå î÷åíü õîðîøåå.
Ôðåéì êàê îòäåëüíîå îêíî
Ñåé÷àñ ôðåéìû ïåðåæèâàþò ñâîé óïàäîê (òî åñòü èõ ïî÷òè íèêòî íå èñïîëüçóåò). Åñëè âû âñå æå õîòèòå èñïîëüçîâàòü èõ íà ñâîèõ ñòðàíèöàõ, òî íåêîòîðûå ñâåäåíèÿ î ðàáîòå ñ ôðåéìàìè èç ñêðèïòà ìîãóò ïîìî÷ü.
Ôðåéìû, ïî ñóòè, ïðåäñòàâëÿþò ñîáîé âëîæåííûå îêíà âíóòðè îäíîãî áîëüøîãî îêíà áðàóçåðà. Äëÿ êàæäîãî ôðåéìà ñîçäàåòñÿ îòäåëüíûé îáúåêò window, è âñå ôðåéìû äîñòóïíû èç ãëàâíîãî îêíà â âèäå ìàññèâà frames. Ïðè ýòîì îáðàùàòüñÿ ê ôðåéìó ìîæíî êàê ïî èíäåêñó (â ïîðÿäêå îáúÿâëåíèÿ ôðåéìîâ âíóòðè ôðåéìñåòà), òàê è ïî èìåíè ôðåéìà.
Íàïðèìåð, â òàêîì âîò äîêóìåíòå
<html> <head> </head> <frameset cols="100,*"> <frame name="left" src="left.html"> <frame name="right" src="right.html"> </frameset> </html>
íóëåâîé (îí æå ëåâûé) ôðåéì äîñòóïåí êàê window.frames[0], è êàê window.frames.left
Îáúåêòû window, êîòîðûå íàõîäÿòñÿ âíóòðè ôðåéìîâ, òàêæå èìåþò ñâÿçü ñ ãëàâíûì îêíîì.
Äëÿ òîãî, ÷òîáû ïîëó÷èòü îáðàìëÿþùåå îêíî, èñïîëüçóåòñÿ window.parent. Äëÿ îáðàùåíèÿ ê ãëàâíîìó îêíó (èëè îêíó âåðõíåãî óðîâíÿ) èñïîëüçóåòñÿ window.top
 ñëó÷àå, åñëè îêíî íàõîäèòñÿ «ñíàðóæè» âñåõ îñòàëüíûõ (òî åñòü ÿâëÿåòñÿ îêíîì âåðõíåãî óðîâíÿ) ñâîéñòâà parent è top óêàçûâàþò íà ýòî æå îêíî.
Îïèñàííûå ñâîéñòâà ìîæíî ïðîèëëþñòðèðîâàòü ñêðèïòîì, êîòîðûé îïðåäåëÿåò ñòåïåíü âëîæåííîñòè îêíà âíóòðè ôðåéìîâ.
var deep = 0;
var current = window.self;
while (current != window.top) {
deep++;
current = window.parent;
}
if (deep == 0) {
alert ("Îêíî âåðõíåãî óðîâíÿ");
} else {
alert ("Îêíî íàõîäèòñÿ íà "+ deep +" óðîâíå âëîæåííîñòè");
}
Çäåñü èñïîëüçóåòñÿ åùå îäíî ñâîéñòâî window – window.self. Îáû÷íî äëÿ ñðàâíåíèÿ ññûëîê íà îêíî èñïîëüçóåòñÿ èìåííî ýòî ñâîéñòâî (õîòÿ èñïîëüçîâàíèå ïðîñòî window äàåò òîò æå ðåçóëüòàò).
Ïðè ðàáîòå ñ iframe íè÷åãî ñóùåñòâåííî íå ìåíÿåòñÿ – ôðåéìû òàêæå äîñòóïíû ÷åðåç ìàññèâ frames.
Äëÿ ëó÷øåãî çàêðåïëåíèÿ ìàòåðèàëà, êàê îáû÷íî, íåáîëüøîå çàäàíèå. Îíî î÷åíü ïîõîæå íà çàäà÷ó èç ïåðâîé ÷àñòè ãëàâû, òî åñòü – ñèíõðîíèçàöèþ ôîðì.
Íóæíî íà îñíîâå ýòîé çàäà÷è ñäåëàòü òàêóþ æå ñèíõðîíèçàöèþ, íî – âíóòðè äâóõ ôðåéìîâ. Ïðîâåðêó íà äî÷åðíåå îêíî â ýòîì ñëó÷àå, ñîîòâåòñòâåííî, äåëàòü íå íóæíî (íî íóæíî ïðîâåðÿòü, ëåâûì èëè ïðàâûì ÿâëÿåòñÿ ôðåéì).
