खिड़की चौड़ाई का पता लगाने और स्क्रॉलबार के लिए क्षतिपूर्ति - जावास्क्रिप्ट

Question

मैं जावास्क्रिप्ट और उनके स्क्रॉलबार के लिए खाते के साथ एक उपयोगकर्ता के खिड़की की चौड़ाई पता कैसे लगाते हैं? (मुझे स्क्रॉलबार के अंदर स्क्रीन की चौड़ाई की आवश्यकता है)। यहाँ मैं क्या है है ... यह एक से अधिक ब्राउज़र में काम करने के लिए ... सिवाय इसके कि यह स्क्रॉलबार के लिए खाते में नहीं है लगता है ..

function browserWidth() { 
    var myWidth = 0; 
    if(typeof(window.innerWidth) == 'number') { 
    //Non-IE 
    myWidth = window.innerWidth; 
    } else if(document.documentElement && document.documentElement.clientWidth) { 
    //IE 6+ in 'standards compliant mode' 
    myWidth = document.documentElement.clientWidth; 
    } else if(document.body && document.body.clientWidth) { 
    //IE 4 compatible 
    myWidth = document.body.clientWidth; 
    } 
    return myWidth; 
} 

किसी भी विचार? मैं यह सभी ब्राउज़रों में काम करने की जरूरत है;)

Answer 1

आप क्या गुण क्या on this page on quirksmode.org ब्राउज़र पर समर्थित हैं के बड़े सारांश मिल जाएगा।

आपकी सबसे अच्छी शर्त शायद पृष्ठ में एक तत्व को पकड़ने के लिए है (दस्तावेज़ का उपयोग करके जहां समर्थित है, या document.getElementById या जो कुछ भी हो), अपने ऑफसेट पर जाएं शीर्ष तत्व को खोजने के लिए पैरेंट श्रृंखला, फिर उस तत्व के क्लाइंट की जांच करें और क्लाइंट हाइट।

Answer 2

मैं शरीर की चौड़ाई के "innerWidth" की तुलना करेंगे। यदि शरीर की चौड़ाई> आंतरिक चौड़ाई, तो scrollbars मौजूद हैं।

if (browserWidth() < document.body.offsetWidth) { 
    doSomething(); 
} 

Answer 3

ए (स्पष्ट रूप से बुरा) वैकल्पिक हल यदि आप केवल चौड़ाई में रुचि रखते हैं एक 1px x 100% div बना सकते हैं और अपने offsetWidth उपयोग करने के लिए है। आईई पर काम करता है> = 7, एफएफ, क्रोम, सफारी और ओपेरा (मैं IE6 की कोशिश की नहीं किया है, जैसा कि हम एक करने के लिए काम कर रहे हैं you're-भाग्यशाली यह काम करता है-पर-सब-तो-इसे-शिकायत इन दिनों वहां-प्रतिपादन-विषम नीतियां हैं)। मैं प्रभाग { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' } विशेषता वाले दस्तावेज़ से div को लटका देता हूं, इसे पहली बार इसकी आवश्यकता होती है।

वर्क्स अगर आप इसे पेट कर सकते हैं।

Answer 4

बस window.innerWidth पहले कि जोड़ने() की जाँच करें:

if (typeof(document.body.clientWidth) == 'number') { 
    // newest gen browsers 
    width = document.body.clientWidth; 
    height = document.body.clientHeight; 
} 

Answer 5

एक अन्य समाधान तुम कोशिश कर सकते कुछ सीएसएस बदल रहा है तो स्क्रॉल कर ब्राउज़र विंडो के बजाय, अपने पृष्ठ के भीतर होता है। शरीर के लिए शैली में, ओवरफ्लो जोड़ें: ऑटो। अब शरीर तत्व में स्क्रॉलबार शामिल है, इसलिए जब आप खिड़की की चौड़ाई प्राप्त करते हैं तो आप इसके अंदर स्क्रॉलिंग कंटेनर के बाहर चौड़ाई को माप रहे हैं।

यह quirkiness के संभावित स्रोत, और संभवतः एक सुलभता मुद्दा की तरह लगता है, तो यदि आप व्यापक रूप से उपयोग के लिए जा रहे हैं तो आप इसे काफी सावधानी से जांचना चाहेंगे।

Answer 6

यह मैं क्या किया है - जावास्क्रिप्ट सीखने में केवल आधे साल, तो यह एक बुरा ठीक हो सकता है। सबसे पहले, मैं एक पारदर्शी वर्ग छवि (10px x 10px) बनाई गई हैं, लेकिन आप भी एक गैर पारदर्शी छवि बना सकते हैं और के रूप में अपने जावास्क्रिप्ट को यह जोड़ सकता है
document.getElementById('getDimensions').style.visibility = "hidden";

HTML:

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image 
meant to determine the dimensions of the viewport" width="10px" height="10px"/> 

जावास्क्रिप्ट:

//Inside function called by window.onload event handler (could go in CSS file, but 
//better to keep it with other related code in JS file) 
document.getElementById('getDimensions').style.position = "fixed"; 
document.getElementById('getDimensions').style.bottom = "0px"; 
document.getElementById('getDimensions').style.right = "0px"; 

//Everything below inside function called by window.onresize event handler 
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft; 
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop; 
    //Account for the dimensions of the square img element (10x10) 
var viewportWidth = baseWidthCalculation + 10; 
var viewportHeight = baseHeightCalculation + 10; 

Answer 7

यह टिम सलाई द्वारा प्रकाशित एक विचार का एक अधिक कुशल संस्करण है (ev हालांकि आप अभी शुरुआत कर रहे हैं, यह उस तरह के दाएं कोने में एक तत्व रखने के लिए शानदार था)।

var page = new PageDimensions(); 
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight()); 

बोनस सुविधा::

var getDimensions = document.createElement("div"); 
getDimensions.setAttribute("style", 
      "visibility:hidden;position:fixed;bottom:0px;right:0px;"); 
document.getElementsByTagName("body")[0].appendChild(getDimensions); 
var viewportWidth = getDimensions.offsetLeft; 
var viewportHeight = getDimensions.offsetTop; 

और यहाँ एक मॉड्यूलर संस्करण

var PageDimensions = function(){ 
var Width; 
var Height;  

function pagedimensionsCtor(){ 
    var getDimensions = document.createElement("div"); 
    getDimensions.setAttribute("style" , 
     "visibility:hidden;position:fixed;bottom:0px;right:0px;"); 
    document.getElementsByTagName("body")[0].appendChild(getDimensions); 
    Width = getDimensions.offsetLeft; 
    Height = getDimensions.offsetTop; 
    getDimensions.parentNode.removeChild(getDimensions); 
} 
pagedimensionsCtor(); 

function Reset(){ 
    pagedimensionsCtor(); 
}  

function GetPageHeight(){ 
    return Height; 
} 

function GetPageWidth(){ 
    return Width; 
} 

return{ 
    Reset: Reset, 
    GetPageHeight: GetPageHeight, 
    GetPageWidth: GetPageWidth 
}; 
} 

उपयोग मॉड्यूलर संस्करण है

page.Reset();//just in case you think your dimensions have changed