Předávání hodnot mezi okny v Javascriptu

13.4.2006 16:38 | Přečteno: 1637× | Jen tak

Dneska jsem se z blogy rozjel . Ale tohle si prostě zapsat musím, protože mi řešení zabralo poměrně dlouho a navíc nejsem kovaný v Javascriptu (respektive v rozdílech mezi jednotlivými prohlížeči).

O co jde. Máme okno A, ze kterého otevřeme (pomocí JS) okno B. V okně B je jistý dlouhý seznam a okno B poskytuje funkce jako filtrování, hledání, řazení a podobné. Když je uživatel spokojen a vybere nějaký prvek, je třeba nějakým způsobem vrátit jeho identifikaci zpět do okna A. Celá webová aplikace bude nejčastěji používána v MSIE, ale vývoj probíhá na Firefoxu (WebDeveloper, HTML Validator, Tamper Data a spol jen tak nenahradíš), proto je nezbytné, aby uvedená věc fungovala i v něm (jinak se odřízneme ).

Máme soubor caller.html, který poskutuje funkci update, kterou volá funkce z druhého souboru dialog.html. Hned prvním problémem je otevření modálního dialogu, kterouž funkci poskytuje jen IE. Mozilla based prohlížeče používají parametr modal=yes funce window.open(). Takže se nám kód hezky rozdvojí (a čert ví, jak tohle zvládnou ostatní prohlížeče).

function modalWin(url) {
    if (window.showModalDialog) { // IE
        window.showModalDialog(url,window,
                "dialogWidth:255px;dialogHeight:250px");
    }
    else { // non IE ... zalomeno
        window.open(url,window,
'height=255,width=250,toolbar=no,directories=no,
status=no,menubar=no,scrollbars=no,
resizable=no,modal=yes');
    }
}

function update(text) {
    document.getElementById("spam").innerHTML = text;
}

Zpětná cesta byla horší, protože většina návodů řešila situaci pouze v jediném správném prohlížeči, který neumí korektně pracovat s png obrázky. Nakonec jsem našel nápovědu na w3schools.com a po pár pokusech ze mě vypadlo tohle

function getInfo() {
    var win;
    if (window.dialogArguments) {
        win = window.dialogArguments;
    }
    else {
        win = window.opener;
    }
    win.update('Zmeneny text!');
}

Laskavý čtenář si potřebný HTML kód jistě doplní sám .

       

Komentáře

[Filda]

Tohle jsem taky onehdá potřeboval. Vyřešený to mám v podstatě stejně, ale já to mám lepší :), okno se mi otevirá uprostřed obrazovky

        widthVal = 350;
        heightVal = 280;          
        leftVal = (screen.width / 2) - (widthVal/2);
        topVal = (screen.height / 2) - (heightVal/2);                
       
        date = document.getElementsByName(input2Fill)[0].value;
        window.open(url, title, "width="+widthVal+", height="+heightVal+", left="+leftVal+", top="+topVal);

[Michal Vyskočil]

Doufám, že tvůj kód _byl pod Public Domain

[Filda]

je to pod FPL (Fildova Public License) a ta obsahuje jednu jedinou větu: Dělej si s tim co chceš, hlavně moc nevotravuj :)

[happy barney]

len ma zaujima, preco vsetci tomu co nezvlada png stale vravia prehliadac

[pantera]

diiiky :) v tomto jsem se chtel rypat v sobotu :o) Usetril jsi mi hafo prace s hledanim :)

[Jiří Veselský]

Pokud vím, abyste mohl v Mozille&spol. použít volbu modal=yes, musí mít skript privilegium UniversalBrowserWrite, jinak to nefunguje, a toto privilegium si může vyžádat pouze podepsaný skript.

Jak jste se s tím popral? Jde to nějakým lokálním nastavením prohlížeče obejít, nebo je nutno absolvovat kalvárii s podpisem skriptu? Mi by se to pro nějaké interní firemní aplikace občas taky hodilo, ale námaha na vytváření podepsaných skriptů mi přijde pořád ještě větší, než potencionální efekt...

[Michal Vyskočil]

Přiznávám, že tohle jsem ani nevěděl (opravdu nejsem kovaný v Javascriptu). Protože většina uživatelů jede na IE, pouze vývoj je na ff, tak to asi řešit nebudeme.

[Jiří Veselský]

Aha.

No tak se hlavně ve FF nedivte, že i přes nastavení modal=yes se to okno nechová modálně, chyba není ve vašem skriptu . Pro účely ladění můžete "skoromodální" chování nasimulovat volbou dialog=yes.

[Pavel 'lingeek' Szalbot]

Nedávno mi přišla pozvánka do Google Page Creatoru a tam jsou modální dialogy řešeny jako HTML divy. Jelikož se neřadím mezi JavaScriptové profesionály, nepřišel jsem na to, "jak to v tom Googlu sakra dělají", ale našel jsem http://www.wingo.com/dialogbox/index.html. Snad někomu pomůže.

[Jiří Veselský]

Nasimulovat modální dialog DIVem asi není zas až takový problém, víceméně to celé obsloužíte CSSkem.

Nicméně by mě zajímalo, pokud to někdo tuší, jak přes JS přinutit stránku, aby si něco stáhla ze serveru.

Napadá mě například takováto situace: Mám selectbox se seznamem čehosi (kategorie výrobku), vyberu kategorii a chci, aby se onchange naplnil jiný selectbox, řekněme s typem výrobku. To samozřejmě lze ošetřit, ale já bych navíc chtěl, aby si ten handler události onchange teprve sám ze serveru přečetl, co má vlastně zobrazit podle předchozího výběru, nechcu mít "předčtené" všechny varianty.

V zásadě bych chtěl udělat něco jakoby prvek.innerHTML="http://...". Samozřejmě je možná jakákoliv jiná varianta řešení, ten JS si může požádat o cokoliv jakkoliv a server mu taky může doručit cokoliv jakkoliv, takže je mi celkem jedno, jak přesně se to udělá, jde mi jenom o to, jestli to vůbec jde udělat.

Cíleně jsem sice nepátral, ale na první ani druhý pohled jsem nic podobného nenašel.

[Pavel 'lingeek' Szalbot]

Problémem je právě ta modalita - vyžaduje to už nejen povrchní znalost JS. Hledáte asi AJAX? Doporučuji pak knihovnu prototype.

[Jiří Veselský]

Jo, to je přesně ono

window.XMLHttpRequest je to, co jsem potřeboval slyšet, že tomu říkají AJAX a vedou kolem toho hafo řečí, to je mi šumafuck. Díky.

[happy barney]

modalita? hmm, z mojich povrchnych znalosti by som to riesil dvoma divmi a nastavovanim z-index
prvy by obsahoval data stranky
druhy by obsahoval div s modalnym (fuj, ako niekto moze pouzivat modalne okna??) oknom, bol by nad prvym, transparentny, width/height 100%, cursor: wait; a v nom by bol div s oknom.

[Pavel 'lingeek' Szalbot]

Tohle řeší vzhled (a to si nejsem jistý tou průhledností a její podporou v prohlížečích, navíc je zbytečná). Horší je to s přesměrováním veškerého vstupu do onoho divu. Není to tedy neřešitelné, ale je potřeba mít určité znalosti JavaScriptu.