Ausführliche Erläuterung zur automatischen Erweiterung von Iframe-verschachtelten Unterseiten (einschließlich Iframes)

Das Website-Backend des Unternehmens wurde ursprünglich nicht mit Iframes entwickelt. Um Ressourcen zu sparen, haben wir uns nach einer Diskussion entschieden, das Website-Backend auf Iframes umzustellen. iframe kann einen teilweisen Aktualisierungseffekt ähnlich wie Ajax erzielen (ihre Implementierungsprinzipien sind unterschiedlich). Obwohl iframe sehr leistungsfähig ist, kann es nicht automatisch entsprechend der Höhe der Unterseite erweitert werden. Finden Sie die folgenden Methoden und nehmen Sie dann einige Verbesserungen vor.

1. Jquery-Erfassung (Hinweis: Diese Methode ist nur für übergeordnete Seiten und Unterkategorieseiten unter demselben Domainnamen geeignet und Unterkategorieseiten dürfen keine Iframes enthalten)

aa.html (übergeordnetes Element und Seiten)

<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. Beziehen Sie es mit js (es gibt viele Möglichkeiten, js online zu erhalten, Sie können es einfach durch Suchen finden, aber es sollte beachtet werden, dass: Unterkategorieseiten keine Iframes enthalten können . Wenn die Unterkategorieseite Mit ifrme kann der Effekt der automatischen Erweiterung nicht erreicht werden)

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. Unterstützen Sie Unterkategorieseiten, die Iframes enthalten, d. h. Iframe-Verschachtelung (von Firefox und IE getestet, andere Browser nicht). wurde bereits getestet)

 <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>

Viertens ist dies eine Ergänzung. Die Website hat Methode drei verwendet, aber festgestellt, dass Methode drei nicht funktioniert, weil ich 8b8cf2fa9856592e18398d81de7985e1document.domain = 'xxx.com';2cacc6d41bbb37262a98f745aa00fbf0, was soll ich in diesem Fall tun? Der Code lautet wie folgt:

Auf der Unterseite

<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>

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung zur automatischen Erweiterung von Iframe-verschachtelten Unterseiten (einschließlich Iframes). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!