Home >Web Front-end >JS Tutorial >Real iframe highly adaptive implemented by js (compatible with IE, FF, Opera)_javascript skills

Real iframe highly adaptive implemented by js (compatible with IE, FF, Opera)_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:33:08961browse

Found the following js

Copy the code The code is as follows:

function SetCwinHeight(obj)
{
var cwin=obj;
if (document.getElementById)
{
if (cwin && !window.opera)
{
if (cwin.contentDocument && cwin. contentDocument.body.offsetHeight)
cwin.height = cwin.contentDocument.body.offsetHeight 20;
else if(cwin.Document && cwin.Document.body.scrollHeight)
cwin.height = cwin.Document .body.scrollHeight 10;
}
}
}

Then...
Enter the test process (the call is very simple, skip it first)
1 .IE --- Passed, but there is still a slight difference in height, very small, and the scroll bar is still there
2.FF --- Passed, same as IE, but there is a small gap
3.Opera --- Look at that JS You will know if the conditions are passed
but mainstream browsers must at least pass these three items! ! !
So, Google
searched for the special phenomena of each browser when processing document.scrollHeight or offsetHeigth
and found that when the Opera browser processes iframe content, it uses contentWindow
to process the content. When the height is high, it is consistent with IE
Thus, we have the following js
Copy code The code is as follows:



<script> <br>function SetCwinHeight(obj) <br>{ <br>var cwin=obj; <br>if ( document.getElementById) <br>{ <br>if (cwin && !window.opera) <br>{ <br>if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) <br>cwin.height = cwin. contentDocument.body.offsetHeight 20; //FF NS <br>else if(cwin.Document && cwin.Document.body.scrollHeight) <br>cwin.height = cwin.Document.body.scrollHeight 10;//IE <br>} <br>else <br>{ <br>if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight) <br>cwin.height = cwin.contentWindow.document.body.scrollHeight;// Opera <br>} <br>} <br>} <br></script>