Comment puis-je redimensionner automatiquement une Iframe pour l'adapter à son contenu ?

Ajustement automatique des dimensions d'un iframe pour s'adapter au contenu

Problème :

Comment la largeur et la hauteur d'un iframe peuvent-elles être automatiquement ajustées pour s'adapter précisément à son contenu ? Cet ajustement devrait être possible après le chargement de l'iframe.

Solution :

Pour y parvenir, une action événementielle est nécessaire pour gérer les changements dans les dimensions du corps au sein l'iframe. Voici la solution :

function resizeIFrameToFitContent(iFrame) {
  iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
  iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener("DOMContentLoaded", function (e) {
  var iFrame = document.getElementById("iFrame1");
  resizeIFrameToFitContent(iFrame);

  // To resize all iframes:
  var iframes = document.querySelectorAll("iframe");
  for (var i = 0; i < iframes.length; i++) {
    resizeIFrameToFitContent(iframes[i]);
  }
});

Dans le code ci-dessus :

• La fonction resizeIFrameToFitContent() définit les attributs de largeur et de hauteur de l'iframe en fonction de la largeur de défilement et de la hauteur de son corps contenu.
• L'écouteur d'événement DOMContentLoaded est utilisé pour ajuster les dimensions de l'iframe une fois que l'iframe a été chargé.
• Le code supplémentaire facultatif (commenté) peut être utilisé pour redimensionner toutes les iframes de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!