Определение наличия и размера прокрутки у фрейма
Что бы использовать без jQuery надо $(frameElement).width() и $(frameElement).height() заменить на frameElement.clientWidth/Height и вычитать или не использовать padding'и для iframe'а в IE7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* Detect frame scrollbar size.
* Tested on iframe tag in browsers:
* Firefox 3.6.16
* Firefox 4
* Opera 9.64
* Opera 10.60
* Opera 11.01
* Chrome 10
* IE 6,7,8,9
* Firefox mac 3.6.13
* Chrome mac 10
* Safari mac 5.0.3
*
* @param {HTMLIFrameElement} frameElement
*/
function detectFrameScrollbarSize(frameElement)
{
// frameElement.clientWidth/Height:
// - include scrollbar size for iframe
// - include borders only in IE6
// - include paddings in firefox/opera/chrome/IE6,7
// - not include paddings in IE8,9
// frameElement.contentWindow.innerWidth/Height:
// - include scrollbar size
// - not include paddings and borders
// - undefined in IE6,7,8
// jQuery $(frameElement).width()/height():
// - include scrollbar size for iframe
// - include borders only in IE6
// - not include paddings
var documentElement = frameElement.contentWindow.document.documentElement;
// Instead of jQuery width()/height() you can use frameElement.clientWidth/Height (and subtract
// or not use iframe paddings for IE7):
var clientWidth = frameElement.contentWindow.innerWidth || $(frameElement).width();
var clientHeight = frameElement.contentWindow.innerHeight || $(frameElement).height();
// In IE6 frameElement.clientWidth/Height and jQuery width()/height() include frame border (css border)
if (document.all && !window.opera && !window.XMLHttpRequest) // IE6
{
// documentElement.offsetWidth/Height in IE6 is similar to frameElement.clientWidth in IE8,9
clientWidth = documentElement.offsetWidth;
clientHeight = documentElement.offsetHeight;
}
return {
width: documentElement.clientWidth ? clientWidth - documentElement.clientWidth : 0,
height: documentElement.clientHeight ? clientHeight - documentElement.clientHeight : 0
};
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$('iframe').load(function(e)
{
var size = detectFrameScrollbarSize(e.currentTarget);
alert([size.width, size.height]);
});
});
</script>
</head>
<body>
<iframe src="/" frameborder="0"></iframe>
</body>
</html>
|