Chargement de contenu

Il y a deux techniques pour charger une page dans une iframe. La première est de tout simplement changer l’attribut src de l'iframe via le Javascript, la deuxième est d'ouvrir un lien dans l'iframe. Cette action est rendue possible via l'attribut target (standardisé en HTML5) que l'on peut utiliser sur un lien ou sur un formulaire. C'est cette dernière technique que nous utiliserons pour la réalisation du système d'upload.

Charger une iframe

En changeant l'URL

Ici, rien de compliqué, on change simplement l'URL de l'iframe en changeant sa propriété src. Cette technique est simple et permet de transmettre des paramètres directement dans l'URL. Exemple :

document.getElementById('myFrame').src = 'request.php?nick=Thunderseb';

Avec target et un formulaire

L'intérêt d'utiliser un formulaire est que nous allons pouvoir envoyer des données via la méthode POST. L'utilisation de POST va nous permettre d'envoyer des fichiers, ce qui nous sera utile pour un upload de fichiers !

En fait, pour cette technique, il n'y a pas vraiment besoin du Javascript, c'est du HTML pur :

<div>

</div>

</form>

L'attribut target indique au formulaire que son contenu doit être envoyé au sein de l'iframe dont l'attribut name est myFrame (l'attribut name est donc obligatoire ici !). De cette manière le contenu du formulaire y sera envoyé, et la page courante ne sera pas rechargée.

Le Javascript pourra être utilisé comme méthode alternative pour envoyer le formulaire. Pour rappel, pour envoyer un formulaire, il faut utiliser la méthode submit() :

document.getElementById('myForm').submit();

Détecter le chargement

Avec l'événement load

Les iframes possèdent un événement load, déclenché une fois que le contenu de l'iframe est chargé. À chaque contenu chargé, load est déclenché. C'est un moyen efficace pour savoir si le document est chargé, et ainsi pouvoir le récupérer. Voici un petit exemple :

function trigger() {

var frame = document.getElementById('myFrame');

frame = frame.contentDocument || frame.document;

alert(frame.body.textContent);

}

</script>

Avec une fonction de callback

Quand une page Web est chargée dans l'iframe, son contenu est affiché et les scripts sont exécutés. Il est également possible, depuis l'iframe, d'appeler une fonction présente dans la page « mère », c'est-à-dire la page qui contient l'iframe.

Pour appeler une fonction depuis l'iframe, il suffit d'utiliser :

window.top.window.nomDeLaFonction();

L'objet window.top pointe vers la fenêtre « mère », ce qui nous permet ici d'atteindre la page qui contient l'iframe.

Voici un exemple qui illustre ce mécanisme :

function trigger() {

var frame = document.getElementById('myFrame');

frame = frame.contentDocument || frame.document;

alert('Page chargée !');

}

</script>

window.top.window.trigger(); // On appelle ici notre fonction de callback

</script>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse molestie suscipit arcu.</p>

Créé avec HelpNDoc Personal Edition: Générateur facile de livres électroniques et documentation