Explication détaillée sur l'expansion automatique des sous-pages imbriquées iframe (y compris les iframes)

Le backend du site Web de l'entreprise n'a pas été conçu à l'origine avec des iframes. Plus tard, afin d'économiser des ressources, nous avons décidé de remplacer le backend du site Web par des iframes après discussion. iframe peut obtenir un effet de rafraîchissement partiel similaire à ajax (leurs principes de mise en œuvre sont différents). Bien que iframe soit très puissant, il ne peut pas s'étendre automatiquement en fonction de la hauteur de la sous-page, c'est très ennuyeux, j'ai donc cherché en ligne. recherchez les méthodes suivantes, puis apportez quelques améliorations.

1. acquisition jquery (remarque : cette méthode ne convient qu'aux pages parent et sous-catégorie sous le même nom de domaine, et les pages de sous-catégorie ne peuvent pas contenir d'iframe)

aa.html ( parent et pages)

<iframe name="rightcontent"  id="rightcontent" src=&#39;bb.html&#39; frameborder="0" width="100%" scrolling="no"></iframe>

$("#rightcontent").load(function(){
       var mainheight = $(this).contents().find("body").height()+30;
       $(this).height(mainheight);
    });

2. Obtenez-le avec js (il existe de nombreuses façons d'obtenir js en ligne, vous pouvez le trouver en effectuant simplement une recherche, mais il est à noter que : les pages de sous-catégorie ne peuvent pas contenir d'iframe. Si la page de sous-catégorie Avec ifrme, l'effet d'expansion automatique ne peut pas être obtenu)

function SetCwinHeight(obj) {
    var cwin = obj;
    if (document.getElementByIdx_x_x_x) {       
      if (cwin && !window.opera) {
            if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
               cwin.height = cwin.Document.body.offsetHeight + 30;
               alert(cwin.height); //FF NS
            }else if (cwin.Document && cwin.Document.body.scrollHeight){
                cwin.height = cwin.Document.body.scrollHeight + 10;
            } //IE
        }else {
            this.height=rightcontent.document.body.scrollHeight+30
            if (cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
                cwin.height = cwin.contentWindow.document.body.scrollHeight; //Opera
        }
    }
}

<iframe name="rightcontent"  id="rightcontent" src=&#39;bb.html&#39; frameborder="0" width="100%" scrolling="no" onload="SetCwinHeight(this)">
</iframe>

3. Prise en charge des pages de sous-catégorie contenant des iframes, c'est-à-dire l'imbrication d'iframe (testé par Firefox et IE, d'autres navigateurs n'ont pas été testé)

 <iframe name="rightcontent"  id="rightcontent" src=&#39;bb.html&#39; frameborder="0" width="100%" scrolling="no" onload="this.height=rightcontent.document.body.scrollHeight+50"></iframe>

Quatrièmement, ceci est supplémentaire. Le site Web a utilisé la troisième méthode, mais a constaté que si des noms inter-domaines sont impliqués, la troisième méthode ne fonctionne pas car j'ai écrit < /javascript">document.domain = 'xxx.com';, que dois-je faire dans ce cas ? Le code est le suivant :

Dans la sous-page

<script type="text/javascript">
//设置域信息
document.domain = &#39;xxx.com&#39;;
//设置父级页面引用自身的iframe高度
function setHeight(){
  //判断是否为顶级页面
  if(window.top!=window.self){
      parent.document.getElementByIdx_x(&#39;rightcontent&#39;).height=document.body.scrollHeight+20
  }
}
setHeight();
</script>

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!