Window : méthode requestResize()

Syntaxe

requestResize()

Paramètres

Aucun.

Valeur de retour

Aucune (undefined).

Exceptions

NotAllowedError DOMException

Levée si :

• La méthode requestResize() a été appelée depuis un document de premier niveau (non intégré).
• L'élément d'intégration n'est pas un <iframe>.
• Le document intégré n'a pas choisi de partager sa taille de mise en page en incluant une balise <meta name="responsive-embedded-sizing">.

Description

Pour des raisons de sécurité et de confidentialité, les éléments HTML <iframe> n'exposent pas par défaut au document parent des informations sur la taille du contenu du document qu'ils intègrent.

Pour permettre le redimensionnement réactif des éléments <iframe> en fonction de leur contenu, la balise <meta name="responsive-embedded-sizing"> peut être incluse dans un document intégré pour qu'il choisisse de partager ses informations de taille avec le document parent. La propriété CSS frame-sizing peut ensuite être définie sur le <iframe> pour qu'il adopte la même taille horizontale ou verticale que la taille de mise en page réelle du document intégré (appelée taille intrinsèque de mise en page interne dans la spécification). Cela garantit que le contenu du document s'intègre parfaitement dans son <iframe> d'intégration, évitant ainsi les barres de défilement inutiles.

La taille de mise en page du document intégré est automatiquement signalée une fois lorsque son évènement DOMContentLoaded se déclenche, et à nouveau lorsque l'évènement load de l'objet Window se déclenche.

Dans d'autres circonstances, vous pouvez appeler la méthode requestResize() depuis le document intégré pour qu'il signale une taille de mise en page mise à jour ; cela se fait généralement depuis le gestionnaire d'évènement qui a provoqué le changement de taille du contenu intégré. Si un <iframe> est dimensionné en utilisant frame-sizing, il met alors automatiquement à jour sa taille afin de contenir correctement le contenu intégré.

Exemples

Utiliser requestResize()

Cet exemple montre comment la méthode requestResize() peut être utilisée pour redimensionner automatiquement un <iframe> lorsque la taille de mise en page du contenu de son document intégré change.

Nous avons deux documents, le document principal index.html et le document intégré frame.html.

Le document principal index.html

Le HTML du document index.html contient un en-tête et un <iframe>, dans lequel est intégré le document frame.html :

<h1>Cadres intégrés réactifs — exemple simple</h1>

<iframe src="frame.html"></iframe>

Dans le CSS de index.html, nous donnons au <iframe> une valeur frame-sizing de content-block-size. Comme le <iframe> a un writing-mode horizontal, sa height est définie sur la hauteur de mise en page du document intégré.

iframe {
  frame-sizing: content-block-size;
  border: 2px solid gray;
}

Le document intégré frame.html

Le document frame.html contient un élément <div> avec un attribut tabindex ayant la valeur 0 afin qu'il puisse recevoir la sélection. Il contient un en-tête et quelques paragraphes. Le document inclut également la balise <meta name="responsive-embedded-sizing" />, qui permet de partager la taille de mise en page de son contenu avec le document parent. Enfin, nous incluons un élément <script> contenant du JavaScript pour contrôler la démonstration.

<head>
  <!-- … -->

  <meta name="responsive-embedded-sizing" />

  <!-- … -->
</head>
<body>
  <div tabindex="0">
    <h1>Ceci est mon cadre</h1>
    <p>Voici le contenu de mon cadre.</p>
    <p>Voici encore un peu de contenu.</p>
  </div>
  <script>
    /* … */
  </script>
</body>

Le script à l'intérieur de frame.html commence par récupérer une référence à l'élément <div>. Il définit ensuite des écouteurs d'évènements click et keydown sur le <div>, qui exécutent tous deux une fonction personnalisée appelée ajouterParagraphe() lorsque l'évènement se déclenche.

const divElem = document.querySelector("div");
divElem.addEventListener("click", ajouterParagraphe);
window.addEventListener("keydown", ajouterParagraphe);

La fonction ajouterParagraphe() génère un nouvel élément de paragraphe et l'ajoute à la fin du <div> en tant qu'enfant, augmentant ainsi sa hauteur. Elle appelle ensuite requestResize() afin que la nouvelle taille soit signalée au document parent.

function ajouterParagraphe() {
  const para = document.createElement("p");
  para.textContent = "Nouveau contenu.";
  divElem.appendChild(para);
  window.requestResize();
}

Résultat

Ouvrez notre démonstration de requestResize() ^(angl.) dans un onglet séparé pour la voir en action (voir le code source ^(angl.)).

Même si aucune hauteur (height) explicite n'a été définie sur un <iframe>, celui-ci est dimensionné à la bonne hauteur pour contenir exactement son document intégré, sans barres de défilement. Essayez de cliquer sur le contenu ou de le mettre au point et d'appuyer sur une touche du clavier. Lorsqu'un nouveau paragraphe est ajouté au <div>, le <div> augmente en hauteur, mais un <iframe> augmente également en hauteur pour correspondre.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété CSS frame-sizing
• Le module de dimensionnement des boîtes CSS
• L'élément HTML <meta name="responsive-embedded-sizing">