jQuery: gestire gli iframe

Vi sarà sicuramente capitato o vi capiterà di dover gestire i contenuti di un elemento iframe con jQuery. Esistono varie soluzioni per questo problema. Vediamole insieme.

Accedere ai contenuti di un iframe

Un iframe non è altro che un elemento rimpiazzato che contiene a sua volta un documento HTML esterno. Ciò significa che con un iframe abbiamo un nuovo oggetto document. In altre parole abbiamo un documento HTML completo all'interno della pagina che ospita l'iframe.

Accedere ai contenuti di un iframe è reso possibile dal metodo contents():


var iframe = $('iframe');
var iframeBody = iframe.contents().find('body');
var iframeBodyHTML = iframeBody.html();
console.log(iframeBodyHTML); // l'intera marcatura dell'elemento body dell'iframe

Ovviamente potete utilizzare il metodo find() per selezionare altri elementi.

Intercettare il caricamento di un iframe

Se testate il codice precedente con un iframe dinamico (come ad esempio un adsense banner) noterete che non funziona perché la stringa restituita è vuota. Non è un bug: semplicemente l'iframe non è stato ancora caricato e quindi la sua struttura DOM non è disponibile.

Il problema si risolve utilizzando l'evento load() sull'iframe:


var iframe = $('iframe');
iframe.load(function() {
	var iframeBody = iframe.contents().find('body');
	var iframeBodyHTML = iframeBody.html();
	console.log(iframeBodyHTML); // l'intera marcatura dell'elemento body dell'iframe

});

In pratica accade la stessa cosa che di solito osserviamo nelle immagini: durante il caricamento di un elemento rimpiazzato i suoi contenuti sono accessibili.