Detailed explanation on the automatic expansion of iframe nested subpages (including iframes)-HTML Tutorial-php.cn

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

黄舟

Release： 2017-07-24 09:23:37

Original

3396 people have browsed it

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);
    });

Copy after login

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>

Copy after login

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>

Copy after login

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

Copy after login

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!