Przypuśćmy, że zachodzi potrzeba wykonania jakiegoś fragmentu kodu w momencie załadowania zawartości iframe. W przy- padku gdy iframe jest utworzony statycznie w kodzie HTML strony, sprawa jest bardzo prosta. Wystarczy podłączyć funkcję JavaScript pod zdarzenie load:

<iframe src="http://wikipedia.org" width="600" height="400" onload="someFunction();" ></iframe>

Uwaga: zdarzenie load (onload) zostanie wywołane gdy cała zawartość dokumentu zostanie załadowana (w tym jego elementy zewnętrzne takie jak obrazki). Jeśli trzeba zadziałać wcześniej, tzn. w chwili gdy DOM jest gotowy, należy skorzystać z innych metod...

A co w przypadku iframe’a stworzonego w kodzie Ext JS?

Prostym sposobem na utworzenie go jest użycie Ext.BoxComponent z odpowiednio ustawioną wartością autoEl. Daje to możliwość łatwego wpisania iframe’a w layout Ext JS (np. jako składowej Ext.Window) bez rozszerzania drzewa dokumentu o zbędne elementy.

var iframeContainer = new Ext.BoxComponent({
    autoEl: {
        tag: 'iframe',
        frameborder: '0',
        src: 'http://wikipedia.org'
    },
    listeners: {
        afterrender: function () {
            console.log('rendered');

            this.getEl().on('load', function () {
                console.log('loaded');
            });
        }
    }
});

W powyższym kodzie (Ext JS 3.2.1) bardzo istotny jest moment, w którym pod zdarzenie load iframe’a podpinany jest handler. Można to zrobić jedynie po tym gdy kontrolka (BoxComponent) zostanie wyrenderowana. Jeśli zrobi się to wcześniej, wówczas wywołanie getEl() zwróci undefined i kod nie zadziała. Przed renderowaniem kontrolka Ext JS to jedynie obiekt JavaScript, dla którego nie istnieją żadne elementy w drzewie dokumentu. Poniżej znajdują się dwa screeny prezentujące fragmenty kodu HTML utworzonego przez Ext.Window, w którym jedynym elementem na liście items był BoxComponent tworzący tag iframe...

beforerender:

afterrender:

Widać wyraźnie, że zbyt wczesne podpinanie się pod load nie ma prawa zadziałać bo nie można przecież nasłuchiwać zdarzeń na czymś co nie isntnieje.

Powyższe zrzuty pochodzą z okna Elements narzędzia Chrome Developers Tools. Szybkim sposobem by pokazać to narzędzie (oczywiście w przeglądarce Googla) jest naciśnięcie Ctrl+Shift+I. Fajną funkcją CDT jest możliwość wylistowania zdarzeń nasłuchiwanych na określonym elemencie DOM. By zobaczyć listę trzeba zaznaczyć element DOM i w menu po prawej stronie wybrać zakładkę Event Listeners. Na screenie poniżej widać, że iframe faktycznie posiada obsługę zdarzenia load:

Podczas korzystania z kontrolki CheckBox i ustawiania jej po stronie klienta jako nieaktywnej, natchnąłem się na problem, który (przeoczony) może sporo namieszać w pracy aplikacji. Otóż jeśli CheckBox jest zaznaczony i zablokujesz go ustawiając właściwość disabled w JavaScript to po postbacku zobaczysz, że właściwość Checked == false!

Ten fragment JS ustawia właściwość disabled (CheckBox staje się szary i przestaje reagować na akcje użytkownika):

document.getElementById('<%= CheckBox1.ClientID %>').disabled = true;

Po "powrocie na serwer" kontrolka CheckBox nie będzie zaznaczona. Dzieje się tak dlatego, że przeglądarka nie wysyła w requescie informacji o polu input type="checkbox" z atrybutem disabled.

Testowałem w IE6/8 i FF2 na .NET 2.0/3.5.

Zaletą pisania aplikacji intranetowych jest często to, że wszyscy użytkownicy programu będą korzystać z identycznej przeglądarki. Niestety w wielu instytucjach tą przeglądarką jest IE6. Niechęć do zmiany przeglądarki wynika często z obaw o to, że stare aplikacje (krytyczne dla działalności) nie będą pracować w nowszym IE...

Jeśli w budowanym rozwiązaniu zamierzasz użyć Ajaxa nie zapomnij w wymaganiach warstwy klienckiej określonych w umowie, dodać obsługę ActiveX. Dlaczego nie wystarczy włączyć JavaScript? W IE5.x i IE6 za obsługę asynchronicznej komunikacji z serwerem odpowiada obiekt ActiveX. Utworzyć go można w taki sposób:

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

W innych przeglądarkach obiekt XmlHttpRequest tworzony jest za pomocą kodu:

var xhr = new XMLHttpRequest();

więc użycie ActiveX nie jest konieczne (dotyczy to także IE7).

Jeśli myślisz, że możesz nie przejmować się IE6 to niestety jesteś w błędzie. Ta przestarzała (wypuszczona w 2001) przeglądarka ma nadal 30% udziału w rynku internetowym. W intranetach firm i urzędów na pewno nie jest lepiej...

Dzięki funkcji parseInt() języka JavaScript w łatwy sposób można dokonać konwersji łańcucha tekstowego na liczbę całkowitą. Niestety korzystanie z niej w celu pobrania wartości wpisanej przez użytkownika niesie za sobą pewne zagrożenie. Przeanalizuj poniższy fragment kodu:

function dodaj() {
    var txt = document.getElementById('TextBox1');
    var a = parseInt(txt.value);
    return a + 10;
}

Co stanie się gdy użytkownik wprowadzi do okienka 10? Oczywiście funkcja zwróci wartość 20. Co jednak wydarzy się gdy ktoś wpisze do okienka ciąg 010? Otóż w rezultacie otrzymamy 18! Stało się tak dlatego, że funkcja parseInt() wywoływana tylko z jednym parametrem zinterpretowała tekst wpisany przez usera aplikacji jako wartość podaną w systemie ósemkowym (napis postaci 0x10 został by odczytany jako szesnastkowy). Możesz być niemal pewien, iż użytkownik programu zakładał, że wprowadzenie zera przed liczbę nie powinno mieć wpływu na wynik. A jednak ma! Co zrobić by program działał bardziej intuicyjnie? Wystarczy dodać w wywołaniu funkcji parseInt() drugi parametr określający podstawę wykorzystywanego systemu liczbowego. Należy więc zastosować taki kod:

function dodaj2() {
    var txt = document.getElementById('TextBox1');
    var a = parseInt(txt.value, 10);
    return a + 10;
}

Jeżeli masz coś wspólnego z aplikacjami webowymi to pewnie nerwowo reagujesz na widok IE6. Oto powód by znielubić tą przestarzałą (niestety wciąż popularną) wersję Internet Explorera jeszcze bardziej.

Załóżmy, że masz na formie kontrolki TextBox i Button. Zależy Ci na tym by zablokować przycisk gdy pole tekstowe jest puste. Piszesz więc taką prostą funkcję JavaScript:

function blokuj() {
    if (document.getElementById('TextBox1').value == '') {
        document.getElementById('Button1').disabled = true;
    }
}

i podpinasz ją do zdarzenia onblur (zdarzenie ma miejsce gdy kontrolka traci focus) TextBoxa... Pozornie wszystko działa jak należy - gdy pozostawisz pole tekstowe puste i przeskoczysz klawiszem Tab na inną kontrolkę przycisk zostanie zablokowany. Co jednak stanie się gdy trzymając kursor tekstowy w pustym okienku klikniesz bezpośrednio w przycisk? IE6 zawiesi się do momentu, aż przełączysz się na okno innego programu. By temu zaradzić możesz skorzystać ze zdarzenia onfocusout zamiast onblur jednak takie rozwiązanie nie zadziała poza IE. Można także zamiast kontolki Button użyć ImageButton albo bawić się ukrytym divem, z właściwością Z-index wyższą niż przycisk...