حدث تغيير حجم نافذة جافا سكريبت

Question

كيف يمكنني ربط حدث تغيير حجم نافذة المتصفح؟

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

Answer 1

ومسج هو مجرد التفاف الحدث resize DOM القياسية، على سبيل المثال.

window.onresize = function(event) {
    ...
};

ومسج <م> قد القيام ببعض الأعمال لضمان أن الحدث بتغيير يحصل أطلق باستمرار في جميع المتصفحات، ولكن لست متأكدا إذا كان أي من المتصفحات تختلف، ولكن أود أن أشجعكم على اختبار في فايرفوكس، وسفاري، وIE.

Answer 2

وأبدا تجاوز وظيفة window.onresize.

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

وobject: العنصر أو الكائن إطار
type: تغيير الحجم، التمرير (نوع الحدث)
callback: الإشارة الدالة

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

وبعد ذلك استخدام مثل هذا:

addEvent(window, "resize", function_reference);

وأو مع وظيفة غير معروفة:

addEvent(window, "resize", function(event) {
  console.log('resized');
});

Answer 3

أولا، وأنا أعلم وقد ذكرت طريقة addEventListener في التعليقات أعلاه، ولكن لم أر أي رمز. لأنه هو النهج المفضل، ومن هنا:

window.addEventListener('resize', function(event){
  // do stuff here
});

وإليك عينة العمل .

Answer 4

ولا ينبغي أبدا أن تستخدم الحدث تغيير حجم مباشرة كما أطلقت عليه باستمرار ونحن تغيير.

استخدم وظيفة debounce للتخفيف من المكالمات الزائدة.

وwindow.addEventListener('resize',debounce(handler, delay, immediate),false);

وفيما يلي debounce المشترك العائمة في جميع أنحاء الشبكة، على الرغم من لا نبحث عن أكثرها تقدما كما featuerd في lodash.

const debounce = (func, wait, immediate) => {
    var timeout;
    return () => {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

وهذا يمكن أن تستخدم مثل ذلك ...

window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);

ووسوف النار أبدا أكثر من مرة واحدة كل 200MS.

لاستخدام التغييرات التوجه المحمولة:

window.addEventListener('orientationchange', () => console.log('hello'), false);

وإليك مكتبة صغيرة لقد وضعت لرعاية هذا بعناية.

Answer 5

أعتقد أن الإجابة الصحيحة قد تم تقديمها بالفعل بواسطةAlex V، ومع ذلك فإن الإجابة تتطلب بعض التحديث حيث أن عمرها الآن يزيد عن خمس سنوات.

هناك قضيتان رئيسيتان:

1. لم أستعمل أبدا object كاسم المعلمة.وهي كلمة محفوظة.مع هذا، لن تعمل وظيفة @Alex V المقدمة strict mode.

2. ال addEvent الوظيفة التي يوفرهاAlex V لا تُرجع ملف event object إذا addEventListener يتم استخدام الطريقة.يجب إضافة معلمة أخرى إلى addEvent وظيفة للسماح بذلك.

ملحوظة:المعلمة الجديدة ل addEvent لقد أصبح اختياريًا بحيث لا يؤدي الترحيل إلى إصدار الوظيفة الجديدة هذا إلى قطع أي استدعاءات سابقة لهذه الوظيفة.سيتم دعم جميع الاستخدامات القديمة.

هنا هو المحدث addEvent وظيفة مع هذه التغييرات:

/*
    function: addEvent

    @param: obj         (Object)(Required)

        -   The object which you wish
            to attach your event to.

    @param: type        (String)(Required)

        -   The type of event you
            wish to establish.

    @param: callback    (Function)(Required)

        -   The method you wish
            to be called by your
            event listener.

    @param: eventReturn (Boolean)(Optional)

        -   Whether you want the
            event object returned
            to your callback method.
*/
var addEvent = function(obj, type, callback, eventReturn)
{
    if(obj == null || typeof obj === 'undefined')
        return;

    if(obj.addEventListener)
        obj.addEventListener(type, callback, eventReturn ? true : false);
    else if(obj.attachEvent)
        obj.attachEvent("on" + type, callback);
    else
        obj["on" + type] = callback;
};

مثال للدعوة إلى الجديد addEvent وظيفة:

var watch = function(evt)
{
    /*
        Older browser versions may return evt.srcElement
        Newer browser versions should return evt.currentTarget
    */
    var dimensions = {
        height: (evt.srcElement || evt.currentTarget).innerHeight,
        width: (evt.srcElement || evt.currentTarget).innerWidth
    };
};

addEvent(window, 'resize', watch, true);

Answer 6

شكرا للإشارة إلى مشاركة مدونتي على http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html.

بينما يمكنك فقط ربط حدث تغيير حجم النافذة القياسي، ستجد أنه في IE، يتم إطلاق الحدث مرة واحدة لكل حركة X ومرة ​​واحدة لكل حركة على المحور Y، مما يؤدي إلى إطلاق عدد كبير من الأحداث التي قد يكون لها أداء التأثير على موقعك إذا كان العرض مهمة مكثفة.

تتضمن طريقتي مهلة قصيرة يتم إلغاؤها في الأحداث اللاحقة حتى لا يتم إضافة الحدث إلى الكود الخاص بك حتى ينتهي المستخدم من تغيير حجم النافذة.

Answer 7

الحل لعام 2018+:

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

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

حاليا فقط يدعمه Chrome ولكن من المحتمل أن تتبعه المتصفحات الأخرى (قريباً).في الوقت الحالي عليك استخدام أ polyfill.

Answer 8

window.onresize = function() {
    // your code
};

Answer 9

وبلوق وظيفة التالية قد تكون مفيدة لك: <لأ href = "http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html" يختلط = "نوفولو noreferrer "> تحديد نافذة تغيير حجم الحدث في IE

وويوفر هذا الرمز:

<اقتباس فقرة>

Sys.Application.add_load(function(sender, args) {
    $addHandler(window, 'resize', window_resize);
});

var resizeTimeoutId;

function window_resize(e) {
     window.clearTimeout(resizeTimeoutId);
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}

Answer 10

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

window.addEventListener("resize", function () {
  var recResizeElement = function (root) {
    Array.prototype.forEach.call(root.childNodes, function (el) {

      var resizeEvent = document.createEvent("HTMLEvents");
      resizeEvent.initEvent("resize", false, true);
      var propagate = el.dispatchEvent(resizeEvent);

      if (propagate)
        recResizeElement(el);
    });
  };
  recResizeElement(document.body);
});

لاحظ أن العنصر التابع يمكن استدعاء

 event.preventDefault();

وعلى الكائن الحدث الذي تم تمريره في مثل الارجنتين الأول من الحدث تغيير الحجم. على سبيل المثال:

var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
  ...
  event.preventDefault();
});

Answer 11

var EM = new events_managment();

EM.addEvent(window, 'resize', function(win,doc, event_){
    console.log('resized');
    //EM.removeEvent(win,doc, event_);
});

function events_managment(){
    this.events = {};
    this.addEvent = function(node, event_, func){
        if(node.addEventListener){
            if(event_ in this.events){
                node.addEventListener(event_, function(){
                    func(node, event_);
                    this.events[event_](win_doc, event_);
                }, true);
            }else{
                node.addEventListener(event_, function(){
                    func(node, event_);
                }, true);
            }
            this.events[event_] = func;
        }else if(node.attachEvent){

            var ie_event = 'on' + event_;
            if(ie_event in this.events){
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                    this.events[ie_event]();
                });
            }else{
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                });
            }
            this.events[ie_event] = func;
        }
    }
    this.removeEvent = function(node, event_){
        if(node.removeEventListener){
            node.removeEventListener(event_, this.events[event_], true);
            this.events[event_] = null;
            delete this.events[event_];
        }else if(node.detachEvent){
            node.detachEvent(event_, this.events[event_]);
            this.events[event_] = null;
            delete this.events[event_];
        }
    }
}

Answer 12

<script language="javascript">
    window.onresize = function() {
    document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
} 

</script>