Come cambiare l’attributo “src” ad un iframe con JavaScript

Uno degli strumenti più utilizzati in HTML, che consente di integrare risorse esterne di vario genere all’interno di una pagina web, è l’iframe.

Gli iframe hanno numerosi utilizzi e possono essere facilmente gestiti anche con il semplice HTML. Tuttavia durante la mia esperienza come sviluppatore, ho avuto diverse volte la necessita di modificare e manipolare gli iframe dopo l’apertura e il caricamento di una pagina, e questo può essere fatto esclusivamente con JavaScript.

Con JavaScript si può facilmente cambiare qualsiasi attributo dell’elemento HTML, come l’attributo “src“, in cui è indicata la risorsa web al quale l’iframe deve puntare.

Per fare in modo che l’iframe cambi l’URL inserito nell’attributo “src” dopo il caricamento (lato client), l’unico modo che abbiamo è tramite JS, come vedremo qui di seguito.

Cambiare l’attributo “src” di un iframe con JavaScript

Per fare in modo che l’attributo src, indifferentemente dall’elemento HTML associato, venga cambiato con JavaScript, abbiamo a disposizioni differenti metodi, tutti facili da applicare e da seguire.

Prima di tutto, ipotizziamo un comune iframe all’interno della pagina HTML:

<iframe id="myFrame" src="https://www.miosito.com/"></iframe>

Come puoi vedere, ho assegnato un selettore “id” all’iframe per facilitare la comprensione del codice anche ai meno esperti.

Nel primo metodo che vedremo, richiameremo il medesimo attributo “src” in JavaScript, e cambieremo il suo valore in questo modo:

document.getElementById("myFrame").src = "https://www.altrosito.com";

Una semplice istruzione, che può essere aggiunta ad una funzione o ad un evento “onclick” su di un pulsante.

Come metodo alternativo, è possibile utilizzate il metodo “setAttribute()“, come in questo esempio:

document.getElementById("myFrame").setAttribute("src","https://www.altrosito.com");

Entrambi i metodi funzionano allo stesso modo e riportano i medesimi risultati. Il secondo con “setAttribute()” è spesso utilizzato anche per l’assegnazione di altri valori e attributi.

Leggi anche: Come creare facilmente un editor HTML come quello di w3schools

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA