Пытаюсь найти кроссбраузерное решение, позвояющее определить размеры view-порта.
Определил, что нужный результат дают значения
var Width=document.documentElement.scrollWidth;
var Height=document.documentElement.scrollHeight;
Этот способ всегда даёт корректный результат.
Но этот способ даёт сбой в браузерах GoogleChrome и Safari, когда на странице есть элементы со свойством position:absolute; Если задать для элемента свойство position:absolute; и с помощью top и left расположить элемент далеко влево или вправо (например, задав большие значения top=3000 и left=2000), то в этих браузерах view-порт не увеличивается. В других же браузерах, таких как IE, Firefox, Opera view-порт увеличится таким образом, что будет содержать в себе этот элемент.
Помогите найти кроссбраузерное решение, учитывающее этот случай. В разметке может возникнуть ситуация, когда элементы имеют позиционирование position:absolute;, а тогда в браузерах GoogleChrome и Safari мы получим совсем не тот размер view-порта.
Для примера я привожу html-код, с помощью которого я тестирую различные значения.
|
Код:
|
<!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" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ru" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title></title>
<style type="text/css" media="all">
* {padding:0; margin:0;}
html, body, div, p, span, a, table, tbody, tr, td, label, img, ul, li, ol {border:0;}
html {background-color:blue;}
body {background-color:olive;}
#the_image1
{
margin:5px;
position:absolute;
top:10px;
left:950px;
}
#the_image2
{
margin:5px;
position:absolute;
top:1500px;
left:1250px;
}
#the_image3
{
position:absolute;
top:1400px;
left:850px;
}
</style>
<script type="text/javascript">
function tipShow()
{
var cX1=document.documentElement.scrollWidth;
var cY1=document.documentElement.scrollHeight;
var cX2=document.body.clientWidth;
var cY2=document.body.clientHeight;
var cX3=document.body.offsetWidth;
var cY3=document.body.offsetHeight;
var cX4=window.offsetHeight;
var cY4=window.offsetWidth;
alert("document.documentElement.scrollWidth/Height = " + cX1 + "x" + cY1 + " document.body.clientWidth/Height = " + cX2+ "x" + cY2 + " document.body.offsetWidth/Height = " + cX3 + "x" + cY3 + " window.offsetHeight/Width= " + cX4+ "x" + cY4 );
}
</script>
</head>
<body>
<br />
text
<br />
text
<br />
text
<img id="the_image1" onclick="tipShow();" width="100" src="1.gif" />
<img id="the_image2" onclick="tipShow();" width="100" src="1.gif" />
<img id="the_image3" onclick="tipShow();" width="100" src="1.gif" />
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
<br />
text
</body>
</html> |
Здесь элементы #the_image2 и #the_image3 абсолютно спозиционированы и визуально находятся вне тега body. В браузерах GoogleChrome и Safari view-порт с помощью document.documentElement.scrollWidth; и document.documentElement.scrollHeight; определяется неправильно.
Нормальное зачение view-порта в остальных браузерах составляет 1355х1588.