Méthode JS pour implémenter la hauteur adaptative iframe (compatible avec IE et FireFox)

L'exemple de cet article décrit la méthode d'implémentation de la hauteur adaptative iframe dans JS. Je le partage avec vous pour votre référence. Les détails sont les suivants :

J'ai déjà été troublé par le problème de la hauteur adaptative iframe. De nombreux codes JS semblent devenir stupides dans FF. Plus tard, j'ai finalement extrait le code suivant de la pile de milliers de codes prétendant être compatibles avec FF. Je l'ai utilisé, c'est vraiment utile. Surtout pour les personnes comme moi ayant de faibles compétences en JS (je suis désolé), ce code est simple, facile à comprendre et facile à modifier. Copiez et collez simplement le code suivant dans la balise situé et modifiez simplement le nom de l'ID (notez qu'il y a deux endroits à modifier et les emplacements sont expliqués dans le code).

Rendez hommage à l'ami qui est à l'origine de ce code.

Étape 1 : Saisissez le code JS suivant sous la balise

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); //将iframe1替换为你的ID名
  var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument;
  if(frm != null && subWeb !=null)
  {
   frm.style.height="0px";//初始化一下,否则会保留大页面高度
   frm.style.height = subWeb.documentElement.scrollHeight+"px";
   frm.style.width = subWeb.documentElement.scrollWidth+"px";
   subWeb.body.style.overflowX="auto";
   subWeb.body.style.overflowY="auto";
  }
}
</script>

Étape 2 : Ajoutez-le à l'iframe tag Ci-dessus id="iframe1"onload="adjustFrameSize()"

Par exemple :

<iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" height="300px" target="_self"frameborder="0"></iframe>

Ce code présente un petit défaut, c'est-à-dire le contenu et la bordure extérieure de l'iframe après utilisation La distance (s'il y a une bordure extérieure) est un peu petite, vous pouvez l'ajuster de manière appropriée, de plus, je n'ai pas testé d'autres navigateurs sauf IE6.0 ou supérieur et FF, et aucun autre défaut n'a été trouvé ; c'est en cours d'utilisation Les chaussures pour enfants qui ont découvert des problèmes ou qui ont de meilleures solutions sont invitées à les partager.

S'il y a une page chargée en ajax à l'intérieur de la page iframe ou si la hauteur de l'iframe change en raison de l'ajout dynamique de contenu via js, vous pouvez ajouter la méthode suivante :

1 : Ajouter le contenu suivant à la sous-page

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

Modifiez la partie dom et appelez cette méthode

2 : Ajouter

vers la page parent

//Très adaptatif

var iframe = document.getElementById("iframe1");
function iframeHeight() {
  var hash = window.location.hash.slice(1), h;
  if (hash && /height=/.test(hash)) {
    h = hash.replace("height=", "");
    iframe.style.height = h+"px";
    window.location.hash = "#temp";//防止点击其他页面时高度不变
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Pour plus de méthodes JS pour implémenter la hauteur adaptative iframe (compatible avec IE et FireFox), veuillez faire attention au site Web PHP chinois !