IE和FF下javascript擷取網頁寬高及視窗大小

來源:互聯網
上載者:User

在新定義出來的標準下 document.documentElement.clientHeight在IE和Firefox裡都能擷取正確值,下面一篇文章詳細介紹了擷取各種瀏覽器可見視窗大小這方面的差別:

<script language="javascript">
function getInfo()
{
    var s = "";
    s += " 網頁可見地區寬:"+ document.body.clientWidth;
    s += " 網頁可見地區高:"+ document.body.clientHeight;
    s += " 網頁可見地區寬:"+ document.body.offsetWidth + " (包括邊線和捲軸的寬)";
    s += " 網頁可見地區高:"+ document.body.offsetHeight + " (包括邊線的寬)";
    s += " 網頁本文全文寬:"+ document.body.scrollWidth;
    s += " 網頁本文全文高:"+ document.body.scrollHeight;
    s += " 網頁被捲去的高(ff):"+ document.body.scrollTop;
    s += " 網頁被捲去的高(ie):"+ document.documentElement.scrollTop;
    s += " 網頁被捲去的左:"+ document.body.scrollLeft;
    s += " 網頁本文部分上:"+ window.screenTop;
    s += " 網頁本文部分左:"+ window.screenLeft;
    s += " 螢幕解析度的高:"+ window.screen.height;
    s += " 螢幕解析度的寬:"+ window.screen.width;
    s += " 螢幕可用工作區高度:"+ window.screen.availHeight;
    s += " 螢幕可用工作區寬度:"+ window.screen.availWidth;
    s += " 你的螢幕設定是 "+ window.screen.colorDepth +" 位彩色";
    s += " 你的螢幕設定 "+ window.screen.deviceXDPI +" 像素/英寸";
    alert (s);
}
getInfo();
</script>

在本地測試當中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得,很簡單,很方便。

而在公司項目當中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中添加這行標記的話

在IE中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見地區寬度
document.documentElement.clientHeight ==> 可見地區高度
在FireFox中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見地區寬度
document.documentElement.clientHeight ==> 可見地區高度
?
在Opera中:
document.body.clientWidth ==> 可見地區寬度
document.body.clientHeight ==> 可見地區高度
document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)

用 javascript 擷取當頁面上滑鼠(游標)位置在許多情況下都會用到,比如拖放,懸停提示(tooltip) 等等。當然,這裡我們依然要面對瀏覽器的相容問題,在不同的瀏覽器下,對這些相關的屬性處理方式也不同,本文詳細介紹了瀏覽器在處理這些屬性時的差異和最終的解決方案。 

  • <script type="text/javascript">
  •  
  • // 說明:擷取滑鼠位置
  • // 整理:http://www.codebit.cn
  • // 來源:http://www.webreference.com
  •  
  • function mousePosition(ev){
  • if(ev.pageX || ev.pageY){
  • return {x:ev.pageX, y:ev.pageY};
  • }
  • return {
  • x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
  • y:ev.clientY + document.body.scrollTop - document.body.clientTop
  • };
  • }
  •  
  • </script>

上面的代碼我們在  怎麼用 javascript 實現拖拽 中已經介紹過了,由於這個需求我們經常用到,所以我們將這段代碼獨立成一篇文章,供新手查詢。

使用方式:
Code:

document.onmousemove = mouseMove;

function mouseMove(ev){
    ev = ev || window.event;
    var mousePos = mousePosition(ev);

關於代碼的詳細說明,原文中已經介紹,現轉到此處:

我們首先要聲明一個  evnet 對象,無論移動、點擊、按鍵等,都會啟用一個 evnet ,在 Internet Explorer 裡,  event 是全域變數,會被儲存在 window.event 裡. 在 firefox 或者其他瀏覽器,event 會被相應的函數擷取.當我們將mouseMove函數賦值於document.onmousemove,mouseMove 會擷取滑鼠移動事件。

為了讓 ev 在所有瀏覽器下擷取了 event 事件,在Firefox下"||window.event"將不起作用,因為ev已經有了賦值。在 MSIE 中 ev 為空白,所以得到 window.event 。

因為在這篇文章中我們需要多次擷取滑鼠位置,所以我們設計了一個 mousePosition 函數,它包含一個參數 : event 。

因為我們要在 MSIE 和其他瀏覽器下運行,Firefox 和其他瀏覽器用 event.pageX 和 event.pageY 來表示滑鼠相對於文檔的位置,如果你有一個 500*500 的視窗並且你的滑鼠在絕對中間,那麼 pageX 和 pageY  的值都是 250,如果你向下滾動  500, 那麼 pageY 將變成 750。

MSIE 正好相反,它使用 event.clientX 和 event.clientY 表示滑鼠相當於視窗的位置,而不是文檔。在同樣的例子中,如果你向下滾動500,clientY 依然是 250,因此,我們需要添加 scrollLeft 和 scrollTop 這兩個相對於文檔的屬性。最後,MSIE 中文檔並不是從 0,0 開始,而是通常有一個小的邊框(通常是 2 象素),邊框的大小定義在  document.body.clientLeft 和 clientTop 中,我們也把這些加進去。

js與jquery獲得頁面大小、捲軸位置、元素位置

//頁面位置及視窗大小

function GetPageSize() {
var scrW, scrH; 
if(window.innerHeight && window.scrollMaxY) 
{    // Mozilla    
scrW = window.innerWidth + window.scrollMaxX;    
scrH = window.innerHeight + window.scrollMaxY; 

else if(document.body.scrollHeight > document.body.offsetHeight)
{    // all but IE Mac    
scrW = document.body.scrollWidth;    
scrH = document.body.scrollHeight; 
} else if(document.body) 
{ // IE Mac    
scrW = document.body.offsetWidth;    
scrH = document.body.offsetHeight;

var winW, winH; 
if(window.innerHeight) 
{ // all except IE    
winW = window.innerWidth; 
winH = window.innerHeight; 
} else if (document.documentElement && document.documentElement.clientHeight)
{    // IE 6 Strict Mode    
winW = document.documentElement.clientWidth;     
winH = document.documentElement.clientHeight; 
} else if (document.body) { // other    
winW = document.body.clientWidth;    
winH = document.body.clientHeight; 
}    // for small pages with total size less then the viewport 
var pageW = (scrW<winW) ? winW : scrW; 
var pageH = (scrH<winH) ? winH : scrH;    
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};

};

//捲軸位置
function GetPageScroll() 

var x, y; if(window.pageYOffset) 
{    // all except IE    
y = window.pageYOffset;    
x = window.pageXOffset; 
} else if(document.documentElement && document.documentElement.scrollTop) 
{    // IE 6 Strict    
y = document.documentElement.scrollTop;    
x = document.documentElement.scrollLeft; 
} else if(document.body) {    // all other IE    
y = document.body.scrollTop;    
x = document.body.scrollLeft;   

return {X:x, Y:y};

}


jquery

擷取瀏覽器顯示地區的高度 : $(window).height(); 
擷取瀏覽器顯示地區的寬度 :$(window).width(); 
擷取頁面的文檔高度 :$(document).height(); 
擷取頁面的文檔寬度 :$(document).width();

擷取捲軸到頂部的垂直高度 :$(document).scrollTop(); 
擷取捲軸到左邊的垂直寬度 :$(document).scrollLeft(); 

計算元素位置和位移量 
offset方法是一個很有用的方法,它返回封裝集中第一個元素的位移資訊。預設情況下是相對body的位移資訊。結果包含 top和left兩個屬性。 
offset(options, results) 
options.relativeTo  指定相對計 算位移位置的祖先元素。這個元素應該是relative或absolute定位。省略則相對body。 
options.scroll  是否把 捲軸計算在內,預設TRUE 
options.padding  是否把padding計算在內,預設false 
options.margin   是否把margin計算在內,預設true 
options.border  是否把邊框計算在內,預設true本文出自:http://www.cnblogs.com/b400800/archive/2012/12/14/2818398.html

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.