Detailed explanation on the automatic expansion of iframe nested subpages (including iframes)

The company's website backend was not originally designed using iframes. Later, in order to save resources, it was decided to change the website backend to iframes after discussion. iframe can achieve a partial refresh effect similar to ajax (their implementation principles are different). Although iframe is very powerful, it cannot automatically expand according to the height of the sub-page. This is very annoying, so I searched online. Search, find the following methods, and then make some improvements.

1. jquery acquisition (Note: This method is only suitable for parent pages and sub-category pages under the same domain name, and sub-category pages cannot contain iframes)

aa.html (parent and page)

<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. Use js to obtain (there are many ways to obtain js online, you can find it by just searching, but it should be noted that: subcategory pages cannot contain iframe, if there is ifrme in the subcategory page , still cannot achieve the effect of automatic expansion)

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>

Third, support the inclusion of iframes in sub-category pages, that is, nested use of iframes (tested by Firefox and IE, other browsers have not been tested yet)

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

4. This is supplementary. The website used method three, but found that if it involves cross-domain names, method three does not work. This is because I wrote 50908b4c82e1fa510a5049ec4c012b04document.domain = 'xxx.com';2cacc6d41bbb37262a98f745aa00fbf0, what to do in this case, the code is as follows:

In the sub-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>

The above is the detailed content of Detailed explanation on the automatic expansion of iframe nested subpages (including iframes). For more information, please follow other related articles on the PHP Chinese website!