|
取得瀏覽器視窗寬高、視埠（view port）寬高、捲軸位置或文件高度等資訊，也是蠻常的需求，不過由於跨瀏覽器的差異性，取得這些資訊比想像中複雜。
在跨瀏覽器下，若要取得HTML文件寬高，可以在document.documentElement上以scrollWidth、scrollHeight取得。若要取得body寬高，則可以使用document.body的scrollWidth、scrollHeight取得。若要取得螢幕的寬高，可以使用screen的width、height取得。若要取得螢幕可用區域的寬高，不含工具列的範圍，可在screen的availWidth、availHeight取得。
在遵守標準的瀏覽器上，以下相關的資訊都可以在window物件上取得：
- screenX、screenY：瀏覽器視窗在螢幕中的位置
- outerWidth、outerHeight：瀏覽器視窗寬、高
- innerWidth、innerHeight：顯示視埠區域寬高（不包括選單、工具列、捲軸）
- pageXOffset、pageYOffset：水平、垂直捲軸位置
但在Internet Explorer中window上不能使用這些特性，如果要取得瀏覽器視窗在螢幕中的位置，必須使用window的screenLeft、screenTop特性。
其它的特性，在不同版本的Internet Explorer上，甚至是否有宣告<!DOCTYPE>的文件上，取得方式都不同，它們可能是在document.body上以相關特性取得，或是在document.documentElement上以相關特性取得：
-
offsetWidth、offsetHeight：瀏覽器視窗寬、高
- clientWidth、clientHeight：顯示視埠區域寬高（不包括選單、工具列、捲軸）
-
srollLeft、scrollTop：水平、垂直捲軸位置
最好的方式，就是對以下的資訊予以封裝。下面這個範例，結合目前所看過的一些樣式設定與維度資訊，可模擬獨佔（Modal）對話方塊，在一開始顯示一個訊息，按下確定鈕後才能操作文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=Big5" http-equiv="content-type">
<style type="text/css">
#message1 {
text-align: center;
vertical-align: middle;
color: #ffffff;
background-color: #ff0000;
width: 100px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
window.onload = function(event) {
function style(obj, prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(obj, null)[prop];
}
else if(obj.currentStyle) {
return obj.currentStyle[prop];
}
else {
return null;
}
}
function opacity(element, value) {
if(value === undefined) { // 取得不透明度
var opt = style(element, 'opacity')
|| style(element, 'filter');
if(opt === '') {
return 1;
}
if(opt.indexOf('alpha') !== -1) {
return opt.substring(14, opt.length - 1) / 100;
}
return parseFloat(opt);
}
if(style(element, 'opacity') !== undefined) {
element.style.opacity = value;
}
else {
element.style.filter =
'alpha(opacity=' + parseInt(value * 100) + ')';
}
}
function screenWidthHeight() {
return {
width: screen.width,
height: screen.height
};
}
function screenAvailWidthHeight() {
return {
width: screen.availWidth,
height: screen.availHeight
};
}
function windowXY() {
var xy = {};
if(window.screenX) {
xy.x = window.screenX;
xy.y = window.screenY;
}
else if(window.screenLeft) {
xy.x = window.screenLeft;
xy.y = window.screenTop;
}
return xy;
}
function windowWidthHeight() {
var wh = {};
if(window.outerWidth) {
wh.width = window.outerWidth;
wh.height = window.outerHeight;
}
else if(document.documentElement.offsetWidth) {
wh.width = document.documentElement.offsetWidth;
wh.height = document.documentElement.offsetHeight;
}
else if(document.body.offsetWidth) {
wh.width = document.body.offsetWidth;
wh.height = document.body.offsetHeight;
}
return wh;
}
function htmlWidthHeight() {
return {
width: window.documentElement.scrollWidth,
height: window.documentElement.scrollHeight
};
}
function bodyWidthHeight() {
return {
width: window.body.scrollWidth,
height: window.body.scrollHeight
};
}
function viewPortWidthHeight() {
var wh = {};
if(window.innerWidth) {
wh.width = window.innerWidth;
wh.height = window.innerHeight;
}
else if(document.documentElement.clientWidth) {
wh.width = document.documentElement.clientWidth;
wh.height = document.documentElement.clientHeight;
}
else if(document.body.clientWidth) {
wh.width = document.body.clientWidth;
wh.height = document.body.clientHeight;
}
return wh;
}
function scrollXY() {
var xy = {};
if(window.pageXOffset) {
xy.x = window.pageXOffset;
xy.y = window.pageYOffset;
}
else if(document.documentElement.srollLeft) {
xy.x = document.documentElement.srollLeft;
xy.y = document.documentElement.srollTop;
}
else if(document.body.srollLeft) {
xy.x = document.body.srollLeft;
xy.y = document.body.srollTop;
}
return xy;
}
var message1 = document.getElementById('message1');
opacity(message1, 0.5);
var viewPortWH = viewPortWidthHeight();
message1.style.width = viewPortWH.width + 'px';
message1.style.paddingTop = viewPortWH.height / 2 + 'px'
message1.style.height = viewPortWH.height / 2 + 'px';
document.getElementById('confirm').onclick = function() {
message1.style.width = '0px';
message1.style.height = '0px';
message1.style.paddingTop = '0px';
message1.style.display = 'none';
};
};
</script>
</head>
<body>
這些是一些文字<br>這些是一些文字<br>這些是一些文字<br>
<button>其它元件</button>
<div id="message1">
看點廣告吧！<br><br>
<button id="confirm">確定</button>
</div>
</body>
</html>
|