An explanation of how to make iframe adaptive to height

Why do you need to use iframe adaptive height? In fact, it is just for the sake of beauty, otherwise the iframe and the window will be different in length and size, which will always look uncomfortable, especially for those of us who are programmers, it will feel like a lump in the throat. After another page is embedded in the page through an iframe, how can this area of ​​the page automatically adapt to the height of the iframe without having crappy up, down, left, and right scroll bars? The following method is to use JavaScript to achieve highly adaptive iframes. This is compatible with all browsers. Browsers such as IE, Firefox, Chrome, Opera, and Safari can all achieve highly adaptive iframes. The specific js code is as follows:

function dyniframesize(down){
var Sys={};
var ua=navigator.userAgent.toLowerCase();
var s;
(s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:
(s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]:
(s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]:
(s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]:
(s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0;
var pTar=null;
if (document.getElementById){
pTar=document.getElementById(down);
}else{
eval('pTar='+down+';');
}
pTar.style.display="block";
if (Sys.ie){
if(Sys.ie=='9.0'){
pTar.height=pTar.contentWindow.document.body.offsetHeight+15+"px";
pTar.width=pTar.contentWindow.document.body.scrollWidth+"px";
}else if(Sys.ie=='8.0'){
pTar.height=pTar.Document.body.offsetHeight+15+"px";
pTar.width=pTar.Document.body.scrollWidth+"px";
}else{
pTar.height=pTar.Document.body.scrollHeight+25+"px";
pTar.width=pTar.Document.body.scrollWidth+"px";
}
}
if (Sys.firefox){
pTar.height=pTar.contentDocument.body.offsetHeight+15+"px";
pTar.width=pTar.contentDocument.body.scrollWidth+"px";
}
if (Sys.chrome){
pTar.height=pTar.contentDocument.body.offsetHeight;
pTar.width=pTar.contentDocument.body.scrollWidth;
}
if (Sys.opera){
pTar.height=pTar.contentDocument.body.offsetHeight;
pTar.width=pTar.contentDocument.body.scrollWidth;
}
if (Sys.safari){        
if(pTar.contentDocument.body.offsetHeight <= &#39;186&#39;){
pTar.height=pTar.contentDocument.body.offsetHeight+10;
}else{
pTar.height=pTar.contentDocument.body.offsetHeight;
}
pTar.width=pTar.contentDocument.body.scrollWidth;
}
}

The specific usage method is as follows (set the height of the iframe with id=phpernote to adapt to the height of the content in the iframe):

<iframe marginwidth="0" framespacing="0" marginheight="0" frameborder="0" border="0" width="620px"
 style="border:0px;background:#FFF;max-height:245px;
" scrolling="no" src="http://www.phpernote.com/comm/page/218167" id="phpernote" onload="javascript:dyniframesize(&#39;phpernote&#39;);">
</iframe>

In the previous article we introduced how to use the iframe attribute, this article still teaches you the solution to iframe adaptive height. I hope these two articles will give you a deeper understanding of iframe tags.

Related recommendations:

How to use the iframe attribute

Detailed explanation of the mutual communication between main and iframe in php

php form file iframe asynchronous upload tutorial explanation

Sharing iframe tag attention issues

html Practical summary sharing of iframe use

The above is the detailed content of An explanation of how to make iframe adaptive to height. For more information, please follow other related articles on the PHP Chinese website!