javascript - loading plugin jquery




احصل على حجم الشاشة وصفحة الويب الحالية ونافذة المتصفح (11)

كيف يمكنني الحصول على windowWidth ، windowHeight ، pageWidth ، pageHeight ، screenWidth ، screenHeight ، pageX ، pageY ، screenX ، screenY والتي ستعمل في جميع المتصفحات الرئيسية؟


هنا هو الحل الخاص بي!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();


إذا كنت تستخدم jQuery ، فيمكنك الحصول على حجم النافذة أو المستند باستخدام أساليب jQuery:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

بالنسبة لحجم الشاشة ، يمكنك استخدام كائن screen بالطريقة التالية:

screen.height;
screen.width;

تحتاج في بعض الأحيان إلى رؤية تغيرات العرض / الارتفاع أثناء تغيير حجم النافذة والمحتوى الداخلي.

لذلك قمت بكتابة برنامج نصي صغير يضيف مربع سجل يقوم بمراقبة كافة التحديثات بتغيير الحجم والتحديث بشكل شبه فوري.

يضيف HTML صالحًا مع موضع ثابت ومؤشر z عالي ، ولكنه صغير بما يكفي ، لذلك يمكنك :

  • استخدامه على موقع فعلي
  • استخدامه لاختبار وجهات النظر المتنقلة / الاستجابة


تم اختباره على: Chrome 40 أو IE11 ، ولكن من الممكن جدًا العمل على المتصفحات الأخرى / القديمة أيضًا ... :)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

تحرير: يتم الآن تطبيق الأنماط فقط على عنصر جدول المسجل - وليس على جميع الجداول - وهذا أيضا هو حل خالية من jQuery :)


طريقة غير jQuery للحصول على بُعد الشاشة المتوفر. لقد تم بالفعل وضع window.screen.width/height ، ولكن بالنسبة لتصميم الويب والاستجابة السريعة ، أعتقد أنه من المفيد ذكر هذه السمات:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth و availHeight - العرض والارتفاع المتوفران على الشاشة (باستثناء أشرطة مهام نظام التشغيل ومثلها).


قمت بتطوير مكتبة للتعرف على حجم إطار العرض الحقيقي لأجهزة سطح المكتب وأجهزة المتصفحات المتنقلة ، لأن أحجام إطار العرض تكون غير متوافقة مع الأجهزة ولا يمكنها الاعتماد على جميع إجابات المنشور (وفقًا لجميع الأبحاث التي قمت بها حول هذا الموضوع): https://github.com/pyrsmk/W


كتبت jarkascript صغيرة يمكنك استخدامها لعرض الحجم. يمكنك إضافته بسهولة إلى متصفحك وكلما نقرت عليه سترى الحجم في الزاوية اليمنى من نافذة المتصفح.

تجد هنا معلومات حول كيفية استخدام Bookmarklet https://en.wikipedia.org/wiki/Bookmarklet

بووكمركلت

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

الكود الأصلي

الرمز الأصلي موجود في القهوة:

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

بشكل أساسي ، يقوم الكود بتثبيت div صغير يتم تحديثه عند تغيير حجم نافذتك.



هنا هو حل متصفح متقاطع مع جافا سكريبت نقية ( w3schools.com/jsref/prop_win_innerheight.asp ):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

يمكنك أيضًا الحصول على عرض وارتفاع WINDOW ، وتجنب أشرطة أدوات المتصفح وأشياء أخرى. إنها المنطقة الحقيقية القابلة للاستخدام في نافذة المتصفح .

للقيام بذلك ، استخدم: خصائص window.innerHeight و window.innerHeight ( w3schools.com/jsref/prop_win_innerheight.asp ).

في معظم الحالات ، ستكون أفضل طريقة ، على سبيل المثال ، لعرض مربع حوار مشروط عائم متمركز بشكل مثالي. يسمح لك بحساب المواضع على النافذة ، بغض النظر عن اتجاه الدقة أو حجم النافذة الذي يستخدم المتصفح.


يمكنك استخدام كائن Screen للحصول على هذا.

فيما يلي مثال على ما سيعود:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

للحصول على متغيّر screenWidth الخاص بك ، ما screen.width سوى استخدام screen.width ، نفس الأمر مع screenHeight ، ما عليك سوى استخدام screen.height .

للحصول على عرض النافذة وارتفاعها ، فسيكون screen.availWidth أو screen.availHeight على التوالي.

pageX و pageY ، استخدم window.screenX or Y لاحظ أن هذا من اليسار / الجزء العلوي من يسار / TOP-EST SCREEN . لذا إذا كان لديك شاشتي عرض 1920 فستكون نافذة بحجم 500 بكسل من الجانب الأيسر للشاشة اليمنى بقيمة X تبلغ 2420 (1920 + 500). screen.width/height ، يعرض screen.width/height عرض أو ارتفاع شاشة CURRENT.

للحصول على عرض صفحتك وارتفاعها ، استخدم $(window).height() jQuery's $(window).height() أو $(window).width() .

مرة أخرى باستخدام jQuery ، استخدم $("html").offset().top و $("html").offset().left لصفحتك pageX و pageY القيم.


function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');




cross-browser