Retourner � la page d'accueil de TJS

JavaScript et les frames et iframes

Les frames sont de plus en plus rejetées par le monde de l'internet. La plupart des grands sites les ont abandonnes et ont choisi de recopier sur chaque page le menu et tous les liens de leur navigation. Nous allons tout de mme aborder la mise en place des frames et surtout leur intrt dans la programmation JavaScript.

Comment intgrer des frames ?

Pour crer une page spare en plusieurs frames, il faut l'origine une page principale qui remplace la zone BODY par la dclaration et le positionnement des frames.
La structure classique d'une page dcoupe en frames est celle-ci.

<html>
<head>
<title>Titre de page contenant les frames</title>
</head>
<frameset cols="140,*">
  <frameset rows="*,50" frameborder=0>
    <frame name="frame1" src="frame1.html">
    <frame name="frame2" src="frame2.html">
  </frameset>
  <frame name="frame3" src="frame3.html">
</frameset>
Cette dclaration cre une page dcoupe de la sorte :
frame 1
 
 
 
frame 3
frame 2

Nous n'allons pas voir en dtail comment crer des frames, c'est l du langage HTML et leur usage a pratiquement disparu.

Comment intgrer une iframe ?

Une iframe est une frame interne la page. Contrairement aux frame, ce type d'intgration est trs courant, en particulier dans le milieu de la publicit en ligne qui utilise cette technique pour afficher les blocs publicitaires. Une iframe se cre et se positionne un peu comme une balise div. La principale diffrence est que la zone iframe peut tre alimente en contenu par une adresse dfinie dans la proprit src.
<div class="containerIframe">
  <iframe  class="tuto" id="oneIframe" src="iframe.html"></iframe>
</div>

Appliquons quelques lments de style CSS notre exemple :

div.containerIframe {
  text-align:center;
  paddding:5px;
  border:1px solid #999;
}
iframe.tuto  {
  width:220px; height:120px;
  border:2px solid #FFA500;
}

Nous avons donc iframe#oneIframe entour en orange et centr l'intrieur de div.containerIframe qui charge la page iframe.html :


Emulation de la console

Le JavaScript dans les frames et iframe

Changer l'url d'une iframe

Les frame tant dmodes, nous allons concentrer nos exemples sur le cas des iframe. Le code source serait identique pour des frame.

Pour changer l'url charg dans une iframe :

<div class="btn radius btn-sm btn-outline cursor-pointer" onclick="chargerIframe()">
  Cliquer pour charger iframe2.html
</div>

La fonction pour changer l'attribut src de l'iframe :

function chargerIframe() {
  document.querySelector("iframe#oneIframe").setAttribute("src","iframe2.html");
}

Le bouton apparait ici. Cliquez-le pour changer la source de l'iframe de l'exemple plus haut :


Emulation de la console

Communiquer entre l'iframe et le document parent

Reprenons un exemple d'iframe qui charge la page communique.html

<div class="containerIframe">
  <iframe class="tuto" id="myIframe" name="myIframe" src="communique.html"></iframe>

  <div id="myMessage">En attente de rception de l'iframe...</div>
  <div class="btn radius btn-sm btn-outline cursor-pointer" 
   onclick="sendMessage('myIframe', 'JE SUIS TON PERE')">
    Envoyer un message  l'iframe
  </div>
</div>

Dfinissons aussi les fonctions receiveMessage(from, txt) et sendMessage(txt) dans cette page, contenant l'iframe.

function receiveMessage(from, txt) {
  document.getElementById("myMessage").innerHTML="Message reu de l'iframe : '"+txt+"'";
  console.log("Message '"+txt+"' reu de la page "+from);	
}
function sendMessage(to, txt) {
  window.frames[to].receiveMessage("'"+txt+"'");
  console.log("Message '"+txt+"' envoy  l'iframe name="+to);	
}

Ce qui donne cet affichage :


Emulation de la console

Le code source important de l'iframe communique.html est :

<script type="text/javascript">
/* Lance la fonction receiveMessage sur parent */
function sendMessage(txt) {
  var from=document.location.href;
  parent.receiveMessage(from, txt);
}
/* Reoit un message de parent */
function receiveMessage(txt) {
  document.querySelector("div#onIframe").innerHTML="Message reu : "+txt;
}
</script>
<div class="titre">Page communique.html</div>
<div id="onIframe">En attente de rception...</div>
<div class="button" onclick="sendMessage('IFRAME')">Send message  parent</div>

La protection same-origine

Dans l'exemple prcdent, l'iframe est hberge sur le mme domaine que la page appelante. L'origine est la mme. Le navigateur fait donc confiance l'iframe qui est considre comme sure.

Pour des raisons de scurit, le navigateur interdit toute communication avec une frame qui ne serait pas du mme domaine. C'est trs utile dans le cas de la publicit. Certaines rgies indlicates tentent malgr tout de contourner les protections des navigateurs avec des scripts complexes visant rediriger tout le trafic naturel du site vers une page ddie. C'est ce qu'on appelle la faille de scurit XSS ou Cross Site Scripting.

Utilisons la mme iframe communique.html, avec un fond rouge et hberge sur un domaine diffrent et voyons comment il est possible de communiquer :

<div class="containerIframe">
  <iframe class="tuto" id="myIframeExterne" name="myIframeExterne" 
   src="https://koala.network/tjs/communique.html"></iframe>

  <div id="myMessage">En attente de rception de l'iframe...</div>
  <div class="btn radius btn-sm btn-outline cursor-pointer" 
    onclick="sendMessage('myIframeExterne', 'JE SUIS TON PERE')">
    Envoyer un message  l'iframe
  </div>
</div>

Ce qui donne cet affichage :


Emulation de la console

Tentez de cliquer sur les boutons d'envoi de message. Une erreur est gnre et dtect par addEventListener() pour la rendre bien visible...

Tutoriel �crit par webmaster mis � jour le

Troisième édition Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le 30/09/2023 17:54:27 sur php7 en 16.48 ms