Iframe dinamico con javascript

di
Mado91
il
3 risposte
M
Mado91
Pochi posts
Iscritto da
set, 2018
Messaggi:
15

Iframe dinamico con javascript

Buongiorno programmatori ,
sto sviluppando un semplice intranet aziendale basato su una serie di pagine .html accessibili da un server, e vorrei introdurre degli elementi di javascript.
Come da titolo, avrei bisogno di un metodo "dinamico" per gestire elementi iframe.
Di seguito il codice esempio di una pagina tipo:

<link rel="shortcut icon" href="intranet.ico" type="image/x-icon"><title>Intranet</title>
<script>function image(e){if(!e.pageX){document.getElementById("im").style.left = e.clientX + document.body.scrollLeft + 20 + "px";document.getElementById("im").style.top = e.clientY + document.body.scrollTop + 30 + "px";}else{document.getElementById("im").style.left = e.pageX + 20 + "px";document.getElementById("im").style.top = e.pageY + 30 + "px";}}</script>
<body onmousemove="image(event)"><img id="im" src="zampa.ico" style="position:absolute; top: 0px; left:0px;"/>
</tr></table><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr valign="top"><td width="200"><table width="200" cellpadding="5" cellspacing="0" border="0"><tr valign="top"><td width="200"><p>
<table width="10" height="150" cellpadding="0" cellspacing="0" border="0"><tr valign="top"><td width="10"><img src="home.ico" width="180" height="120"><br><br><br><br>


<a href="frame1.html">frame1</a><br>
<a href="frame2.html">frame2</a><br>
<a href="frame3.html">frame3</a><br>


</p></td></tr></table></td>
<td width="10"><table width="10" cellpadding="0" cellspacing="0" border="0"><tr valign="top"><td width="10"><td width="1"><img src="border.ico" width="5" height="550"></td></tr></table></td>
<td width="900"><table width="900" cellpadding="10" cellspacing="0" border="1"><tr valign="top"><td width="900">

<iframe src="prova.html" align="top" width="1000" height="525" frameborder="0" scrolling="no"></iframe>
La domanda è: come posso gestire l'elemento iframe che richiama ad esempio la pagina "prova.html" in modo che "prova.html" sia una variabile che cambia a seconda del link <a href> cliccato o di un altro elemento (pulsante)? Esiste un modo? Grazie

3 Risposte

  • Hexah
    Hexah
    Utente Attivo
    Iscritto da
    giu, 2018
    Messaggi:
    57

    Re: Iframe dinamico con javascript

    Supponendo che tu gia' sappia come creara un evento chiamato quando il bottone viene premuto/a cliccato, tutto quello che devi fare e' assegnare un id al tuo iframe e poi settare il valore src
    
document.getElementById['idFrame'].src = "frame1.html";
  • M
    Mado91
    Pochi posts
    Iscritto da
    set, 2018
    Messaggi:
    15

    Re: Iframe dinamico con javascript

    Ciao, grazie per la risposta
    Non sono sicuro di aver capito esattamente di cosa parli, potresti farmi un esempio pratico usando il codice che ho inserito?
  • Hexah
    Hexah
    Utente Attivo
    Iscritto da
    giu, 2018
    Messaggi:
    57

    Re: Iframe dinamico con javascript

    Ecco a te: 
    
<a id="aCiao" href="ciao.html">This is my anchor</a>

<iframe id="myFrame" src="prova.html" align="top" width="1000" height="525" frameborder="0" scrolling="no"></iframe>
<script>

    const frame = document.getElementById('myFrame');
    document.getElementById('aCiao').onclick = function (event) {
        // Evita il redirect.
        event.preventDefault();

        // Setta il valore src del iframe.
        frame.src = event.target.getAttribute('href');
    }
</script>
    Cerca di capire anche che cosa ho fatto, senza fare un copia incolla.
Devi accedere o registrarti per scrivere nel forum
3 risposte