Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 17
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    2,125

    cambiare img src da un percorso lungo senza refresh

    tramite javascript possiamo cambiare il source di un immagine al lancio di un qualsiasi evento.

    Nel mio caso voglio cambiare immagine sapendo il suo id.

    Il fatto e' che l'evento viene lanciato da un percorso un po insolito.

    L'immagine si trova in un iframe. Questo iframe e' in una pagina chiamata "about.php"
    Nella pagina "about.php" si trova anche un altro iframe. Questo iframe ha un bottone che apre una popUp, questa popUp possiede il codice per cambiare l'immagine.

    So che e' un po contorto ma perche non mi va se con un alert mi faccio stampare l'src o l'id esatto di quell'immagine? perche non la cambia?

    Raggiungo l'immagine cosi :
    source = window.opener.parent.iframeName.document.getElemen tById('ID_0101_FFFF').src
    idImg = window.opener.parent.iframeName.document.getElemen tById('ID_0101_FFFF').id

    se faccio alert(source) ottengo l'esatto percorso....
    se faccio alert(idImg) ottengo l'esatto id ossia ID_0101_FFFF....


    Ma attenzione...qualora gli dica di cambiare immagine...ossia scrivo

    window.opener.parent.iframeName.document.getElemen tById('ID_0101_FFFF').src = 'nuova.jpg'

    non so perche ma non fa nulla....dove sbaglio?

  2. #2
    L'oggetto opener della popup è l'iframe più "interno", ma la tua immagine è in un iframe che contiene questo iframe "interno". Quindi, l'iframe che contiene l'immagine è semplicemente il parent dell'iframe più interno (quello col pulsante per la popup). Perciò hai due soluzioni: o passi per l'oggetto top (la finestra di livello superiore rispetto a tutti i frames che contiene) e da esso ti riferisci all'iframe più esterno:

    codice:
    window.opener.top.NOMEIFRAME.document.getElementById('ID_0101_FFFF').src = 'nuova.jpg';
    oppure devi semplicemente riferirti all'iframe genitore dell'iframe che apre la popup, così:

    codice:
    window.opener.parent.document.getElementById('ID_0101_FFFF').src = 'nuova.jpg';
    Personalmente ti consiglio il primo metodo, perché gli iframe sono frame "anomali". Browser aderenti agli standard come Netscape spesso non riescono a riferirsi a degli iframe con l'oggetto parent, ma obbligano a passare per l'oggetto top.
    Se scrivi "window.opener.parent.NOMEIFRAME", ti riferisci ad un iframe, contenuto nel più esterno dei due iframe, e chiamato NOMEIFRAME. Questo ovviamente, nel tuo caso, coincide con l'iframe più interno, quello col pulsante per aprire la popup, che però non contiene l'immagine. Il fatto che stampando le variabili source e idImg con un alert() ti funzioni, è una cosa un po' strana però...l'hai provato con browser diversi da IE?


  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    2,125
    grazie per avermi risposto.....


    Purtroppo non funziona niente....probabilmente sono in una situazione un po complicata da spiegare....ci provo....solo che ho bisogno di gente con pazienza perche' sara facile perdersi.

    Per fare delle prove ho portato il codice del cambio immagine a un livello piu basso. Ossia...mi sono messo nella situazione di avere una pagina con dentro un iframe. Questo iframe contine una pagina con l'immagine da cambiare.

    questo il codice

    Codice PHP:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    title>kkkk</title>
    <
    script language="javascript">
    function 
    changeIcon(){
        
    alert(if_prova.document.getElementById("im_prova").src);
    }    
    </script>
    </head>
    <body>                
    <table >          
      <tr>
      <td align="left">Name:</td>
      <td></td>
      <td>
      <iframe name = "if_prova" src = "prova.php" width="400" height="400"  id="framepippo"></iframe></td>
      <input type = "button" value="cambia" onClick="changeIcon();">
    </tr>
     </table>          
    </body>
    </html> 

    faccio presente che questo script funziona....
    Qui avanzo la domanda . Perche con la scritta if_prova.document.getElementById("im_prova").src funziona mentre se provo a passare tramite id non va? tipo scrivendo :
    document.getElementById("framepippo").document.get ElementById("im_prova").src ??


    inoltre aggiungo...nell'originale, l'iframe e' contenuto in un div....puo' essere bloccante?
    perche proprio non mi tornano i conti.

    Nel codice che ho postato sopra noterete che cambiando l'alert in if_prova.document.getElementById("im_prova").src = nuovaImg.jpg fara' cio che deve....

    Invece....nel mio codice originale...volendo lo posto ma e' una mazzata.... non lo fa....
    A questo punto ho paura che i div facciano casino...

  4. #4
    Guardando questo codice posso chiederti se funziona solo con IE o anche con altri browser, come Firefox? Perché se funziona anche con Firefox mi stupisco un po'...non è sbagliato il codice, ma riferirsi ad un iframe semplicemente per nome non dovrebbe essere "capito" da browser diversi da IE. In pratica, quei browser non dovrebbero poter accedere ad un iframe semplicemente indicandone il nome, ma solo passando prima per l'oggetto top (che a sua volta contiene l'iframe). Ripeto...gli iframes sono frames "anomali", che "snaturano" un po' la natura stessa dei frames. Se ci pensi, i frames sono a tutti gli effetti finestre (oggetto window di JavaScript). Di conseguenza, occupano un posto più elevato nella gerarchia degli oggetti JavaScript rispetto agli oggetti document che contengono. Gli iframes invece sono ugualmente oggetti window, ma sono contenuti in un oggetto document, "ribaltando" così la gerarchia. Non vorrei che a questo punto, chiamando per id l'iframe che ti interessa, questo non possa essere interpretato correttamente. Prova a fare una cosa...modifica l'alert della funzione in questi tre modi e verificali uno per uno:

    1. alert(document.frames.if_prova.document.getElement ById("im_prova").src);

    2. alert(top.if_prova.document.getElementById("im_pro va").src);

    3. alert(parent.if_prova.document.getElementById("im_ prova").src);

    Il primo dovrebbe funzionare solo su IE. Il secondo su tutti i browser. Il terzo, probabilmente solo su IE, sebbene sia corretto dal punto di vista sintattico nell'accesso agli oggetti. Fammi sapere.

  5. #5
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    2,125
    ti ringrazio tantissimo di dedicarmi tempo.

    Quello che dici te e' giustissimo...ora ti dico come e' andata....pero' quello che volevo ottenere non va ancora per qualche arcano motivo.

    Le prove le ho sempre fatte sia con IE che con Mozilla.

    Ora..quello che mi hai chiesto di provare era :

    1) alert(document.frames.if_prova.document.getElement ById("im_prova").src);
    questo non va in entrambi i browser

    2) alert(top.if_prova.document.getElementById("im_pro va").src);
    questo va con entrambi i browser

    3) alert(parent.if_prova.document.getElementById("im_ prova").src);
    anche questo va con entrambi


    A questo punto ho provato a cambiare l'immagine ma ho un comportamento strano....
    Provando dunque a cambiare l'alert o del punto 2 o del punto tre rispettivamente con
    top.if_prova.document.getElementById("im_prova").s rc = "immagine.jpg" e
    parent.if_prova.document.getElementById("im_prova" ).src = "immagine.jpg"

    Con IE nessun segno di vita....con Mozilla mi viene nella barra di stato in basso la scritta Trasferimento dati da localhost


    allora ..... a questo punto ti posto tutto il codice...con un copia incolla puoi tentare anche te di risolvere questo enigma.

    Codice PHP:
    <html
    <
    head
    <
    title>kkkk</title
    <
    link rel "stylesheet" type "text/css" href "../css/hyperlife.css"
    <
    style type="text/css"
    /*contenuti*/ 
    .conts 
    visibilityhidden
    left0px
    top0px
    position:absolute


    /* menu linguette non selezionato */ 
    .tab font-familyVerdanafont-size8ptfont-weightnormaltext-aligncenter
    border-leftthin solid #e0e0e0; 
    border-rightnone
    border-topthin solid #e0e0e0; 
    width:115px
    cursorointer



    /* menu linguette selezionato */ 
    .selTab font-familyVerdanafont-size8ptfont-weightboldtext-aligncenter
    border-leftthin solid #919B9C; 
    border-rightthin solid #919B9C; 
    border-topthin solid #919B9C; 
    background:#F4F3EE; 
    width:115px
    cursorointer



    /* tabella generale menu linguette*/ 
    .tabbedDialog 

    font-familyVerdanafont-size8ptfont-weightnormal
    background-color#F0F0E6; 
    WIDTH100%; HEIGHT:100%; 

    </
    style
    <
    script language="javascript" src="../functions/common.js"></script> 
    <script language="javascript"> 

    var currentTab; 
    var tabBase; 
    var firstFlag = true; 


    var s_sessName; 


    window.onload=function(){ 
    init(); 


    function changeIcon(){
        
        //alert(if_prova.document.getElementById("im_prova").src);
        //if_prova.document.getElementById("im_prova").src = "prova.png";
    //    alert(document.frames.if_prova.document.getElementById("im_prova").src);
    //alert(top.if_prova.document.getElementById("im_prova").src);
     //alert(parent.if_prova.document.getElementById("im_prova").src);
        parent.if_prova.document.getElementById("im_prova").src="aiuto.jpg"
        
    }    
    //sets the default display to tab tab 
    function init(){ 
    document.getElementById("tabContents").innerHTML = document.getElementById("t1Contents").innerHTML;
     


    //a public function that the container uses to pass in values for the card containers 
    function public_Contents(contents1, contents2){ 
    document.getElementById("t1Contents").innerHTML = contents1; 
    document.getElementById("t3Contents").innerHTML = contents3; 
    init(); 


    function changeTabs(tabID){ 

    if(firstFlag == true){ 
    currentTab = document.getElementById("t1"); 
    tabBase = document.getElementById("t1base"); 
    firstFlag = false; 

    if(document.getElementById(tabID).className == "tab"){ 
    currentTab.className = "tab"; 
    tabBase.style.backgroundColor = "#919B9C"; 
    currentTab = document.getElementById(tabID); 
    tabBaseID = currentTab.id + "base"; 
    tabContentID = currentTab.id + "Contents"; 
    tabBase = document.getElementById(tabBaseID); 
    tabContent = document.getElementById(tabContentID); 
    currentTab.className = "selTab"; 
    tabBase.style.backgroundColor = ""; 
    document.getElementById("tabContents").innerHTML = tabContent.innerHTML; 






    </script> 
    </head> 
    <body> 

    <table bgcolor ="#ECE9D8" width = "100%" height = "100%" border ="0" bordercolor ="black"cellspacing="0" > 
    <tr valign = "top" align="left"> 
    <td height="3">[img]images/spacer.gif[/img]</td> 
    </tr> 
    <tr valign = "top" align ="left" > 
    <td align = "center" valign = "top" height="10"> 
    <table width="530" align="center" cellspacing="0" border ="0" bordercolor ="green"> 
    <tr> 
    <td class="selTab" onclick="changeTabs('t1')" id="t1">Session Info</td> 
    <td class="tab" onclick="changeTabs('t3')" height="25" id="t3" >General Settings</td> 
    </tr> 
    <tr> 
    <td id="t1base" style=" BORDER-LEFT: gray thin solid; HEIGHT:2px; " ></td> 
    <td id="t3base" style="BACKGROUND-COLOR: #919B9C; HEIGHT: 2px; "></td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td align ="center" valign="top" height="100"> 
     
    <table border = "1" bordercolor ="#919B9C" cellspacing = "0" cellpadding ="0" width ="530" height="370"> 
    <tr> 
    <td valign ="top" bgcolor="#F4F3EE"> 
     
    <table width="100%" align = "center" cellspacing="0" border ="0" bordercolor ="blue"> 
    <tr> 
    <td id="tabContents" ></td> 
    </tr> 

    <tr > 
    <td valign ="top"> 
    <div class="conts" id="t1Contents" > 

    <fieldset style="width:500px;height:180px;" align = "center"> 
    <legend > dati</legend> 

    <table bgcolor="#F4F3EE" width="400" height ="200" align = "center" valign ="top" cellspacing="10"> 


    <tr> 
    <td align="left">Name:</td> 
    <td></td> 
    <td>  <iframe name = "if_prova" src = "prova.php" width="400" height="400"  id="framepippo"></iframe></td>
    <td><input type = "button" value="cambia" onClick="changeIcon();"></td>
    </td> 
    </tr> 


    </table> 
    </fieldset> 

    </div> 
    <div class="conts" id="t3Contents" > 
    seconda tabbed 

    </div> 
    </td> 
    </tr> 
    </table> 
     
    </td> 
    </tr> 
    </table> 
     
    </td> 
    </tr> 

    </table> 
    </body> 
    </html> 

    sostanzialmente il codice aggiuntivo js che vedi serve a pilotare un menu a linguette ....che funziona con i div....mi vien da dire che senza quelli funzioni.....vorrei sapere come oltrepassare questa menata...

  6. #6
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    2,125
    come volevasi dimostrare sono i div...credo....
    Ho isolato il codice js che gestisce la mia tabbed e funziona....


    Come posso fare?

  7. #7
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    2,125
    qui e' un casino...continuo a provare....ora con i div va...piu o meno....se scrivo
    <div class="conts"> non va mentre solo con <div> va...
    A questo punto qualcosa di sbagliato nel css....???? aiutoooo

  8. #8
    La cosa è in effetti strana...frames è una proprietà dell'oggetto document che rappresenta l'array di tutti i frames (ovvero degli iframes) presenti nel documento ed è implementata solo in IE. Quindi è un po' anomalo che con IE non funzioni...
    Usando l'oggetto top invece funziona su tutti i browser, e questa è una cosa positiva, visto che è il modo corretto e crossbrowser per riferirsi ad un iframe. Usando parent, che è tecnicamente corretto ed è equivalente a top nel tuo caso, funziona e anche questo va bene.
    Solo una precisazione: nel codice HTML che hai provato hai inserito gli stessi spazi che ci sono nel codice che hai postato qui? Voglio dire...hai spazi tra un attributo, il segno "=" e il valore di quell'attributo? Perché il codice non è corretto se è scritto così.
    Quando hai provato a cambiare l'immagine, IE non ti ha dato nemmeno un messaggio di errore sulla barra di stato? Perché il fatto che Firefox si blocchi su "trasferimento dati da localhost" è come se non riuscisse a trovare o a caricare l'immagine da quella posizione. Hai verificato poi che Firefox abbia abilitato JavaScript completamente? Perché di default non ha abilitate alcune caratteristiche (Strumenti -> Opzioni -> Contenuti -> Abilita JavaScript -> Avanzate).

  9. #9
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    2,125
    ...un paio di cose che mi hai chiesto non le capisco....dove sarebbero gli spazi? in quale riga? nel codice della funzione changeIcon??

    Io ho Mozilla/5.0 (Windows; U; Windows NT 5.1; it-IT; rv:1.7.12) Firefox/1.0.7


    Hai provato il mio codice togliendo la classe ai div? hai visto che va?

  10. #10
    Utente di HTML.it
    Registrato dal
    Jun 2005
    Messaggi
    2,125
    aggiungo un ultima cosa prima di pranzo....

    Prova a lasciare la class al div e andare nella classe css .conts e mettere
    visibility: relative;
    position:absolute;


    vengono fuori 2 iframe, (prima era nascosto per permettere il funzionamento del mio tabbed) e infatti se premo il bottone funziona ....cambia....

    ora....mi affido alla tua saggezza...come posso fare?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.