জাভাস্ক্রিপ্ট উইন্ডো পুনরায় আকার ইভেন্ট

Question

আমি কীভাবে ব্রাউজার উইন্ডোর পুনরায় আকারের ইভেন্টটিতে প্রবেশ করতে পারি?

আছে পুনরায় আকার দেওয়ার ঘটনা শোনার জন্য অপেক্ষা একটি jQuery পথ কিন্তু আমি শুধু এই এক প্রয়োজন আমার প্রকল্পে এটা আনতে পছন্দ না করেন যাবে।

Comments

ধন্যবাদ সবাইকে. আমি IE সম্পর্কে চিন্তা করি না, আমি একটি মোবাইল ফোনে অপেরাটির আকার পরিবর্তন করার বিষয়ে আরও ভাবছিলাম।

— ডেড অ্যাকাউন্ট

Answer 1

jQuery কেবল স্ট্যান্ডার্ড resizeDOM ইভেন্ট মোড়ানো হয় , যেমন।

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

পুনরায় আকারের ইভেন্টটি সমস্ত ব্রাউজারে নিয়মিতভাবে চালিত হয় তা নিশ্চিত করতে jQuery কিছু কাজ করতে পারে তবে ব্রাউজারগুলির মধ্যে কোনওরকমের পার্থক্য রয়েছে কিনা তা সম্পর্কে আমি নিশ্চিত নই, তবে আমি আপনাকে ফায়ারফক্স, সাফারি এবং আইআইতে পরীক্ষা করতে উত্সাহিত করব।

Comments

এই পদ্ধতির সাথে একটি সম্ভাব্য গোছা হ'ল আপনি ইভেন্টটিকে ওভাররাইড করছেন এবং তাই আপনি কোনও ইভেন্টের সাথে একাধিক ক্রিয়া সংযুক্ত করতে পারবেন না। আপনার জাভাস্ক্রিপ্টটি পাতায় চালিত হতে পারে এমন অন্য কোনও স্ক্রিপ্টের সাথে বন্ধুত্বপূর্ণ খেলতে যাওয়ার জন্য অ্যাডেভেন্টলিস্টনার / সংযুক্তিভিত্তিক কম্বোই সেরা উপায়।

— মাইআইচ্চিচিন

var onresize = window.onresize; উইন্ডো.নরেসাইজ = ফাংশন (ইভেন্ট) of যদি (টাইপফোনারসাইজ === 'ফাংশন') অন্রেসাইজ (); / ** ... * /}

— সাবওনে

window.addEventListener('resize', function(){}, true);

— ওয়েবওয়ান্ডার

@ সুবোন এটির কখনই না করা উচিত তার একটি নিখুঁত উদাহরণ।

— ইউজিন পানকভ

ইসমাস্ক্রিপ্ট :: window.onresize = () => { /* code */ };বা আরও ভাল:window.addEventListener('resize', () => { /* code */ });

— ডার্ক জান স্পেলম্যান

Answer 2

প্রথমত, আমি জানি যে addEventListenerপদ্ধতিটি উপরের মন্তব্যে উল্লিখিত হয়েছে, তবে আমি কোনও কোড দেখিনি। যেহেতু এটি পছন্দসই পদ্ধতির, তাই এটি এখানে:

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

এখানে একটি কাজের নমুনা ।

Comments

এটি সবচেয়ে সহজ উত্তর।

— জ্যাকোভিজা

সেরা উত্তরের মতো শোনাচ্ছে কারণ আপনার উইন্ডোটি ওভাররাইট করা হচ্ছে না event ইভেন্টটি :-)

— জেমস হ্যারিংটন

অনেকে এই উদাহরণে আপনার মতো বেনাম ইভেন্ট শ্রোতা যুক্ত করে তবে এটি আসলে ভাল অনুশীলন নয়, কারণ এই পদ্ধতির পরে এই শ্রোতাদের পরে মুছে ফেলা অসম্ভব করে তোলে । এটি কোনও সমস্যা হত না কারণ ওয়েব পৃষ্ঠাগুলি যেভাবেই স্বল্প-কালীন ছিল, কিন্তু আজকের দিনে এবং এজাজ এবং আরআইএ এবং এসপিএর যুগে এটি এক হয়ে গেছে। ইভেন্ট শ্রোতার জীবনচক্র পরিচালনা করার জন্য আমাদের একটি উপায় প্রয়োজন। সুতরাং, শ্রোতার ফাংশনটিকে আলাদা ফাংশনে পরিণত করা আরও ভাল হবে যাতে এটি পরে মুছে ফেলা যায় removeEventListener।

— স্টিজন ডি উইট

সবাই কেন

— এলোমেলোভাবে

আমি মনে করি যে এখানে স্টিজন ডি উইট এবং কোমল জবাব দুটিই সত্য to কখনও কখনও আপনি ইভেন্ট শ্রোতাদের অপসারণের বিষয়ে চিন্তা করেন তবে আপনি যে ক্ষেত্রে তা করেন না, উপরের উদাহরণে যেমন সমস্ত অতিরিক্ত কোড যুক্ত করা অপ্রয়োজনীয় এবং ফোটা এবং কম পাঠযোগ্যতা উভয়ই হতে পারে। আমার মতে, যদি আপনি শ্রোতাদের অপসারণের কোনও কারণ কল্পনা না করেন তবে এই পদ্ধতির সেরা সমাধান। প্রয়োজনে আপনি পরে সর্বদা এটি পুনরায় লিখতে পারেন। আমার অভিজ্ঞতায়, এই প্রয়োজনীয়তাগুলি কেবলমাত্র নির্দিষ্ট পরিস্থিতিতে দেখা দেয়।

— Cazort

Answer 3

উইন্ডোটি কখনই ওভাররাইড করবেন না function

পরিবর্তে, অবজেক্ট বা উপাদানটিতে ইভেন্ট শ্রোতা যুক্ত করতে একটি ফাংশন তৈরি করুন। এই শ্রোতাগুলি কাজ করে না এমনটি পরীক্ষা করে তোলে এবং এরপরে এটি শেষ অবলম্বন হিসাবে অবজেক্টের ফাংশনটিকে ওভাররাইড করে। এটি jQuery এর মতো লাইব্রেরিতে ব্যবহৃত পছন্দসই পদ্ধতি।

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');
});

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত ছিল। ওভারসাইডিং অন্রেসাইজ করা কেবল খারাপ অভ্যাস।

— টিবিরিউ-আয়নু স্টান

হ্যাঁ, সমস্ত অতিরিক্ত নাল চেকের সাথে কী আছে? আইই ৪.৪ বা কিছুতে কাজ করার চেষ্টা করছেন?

— ফ্লেভারস্পেকপ

এবং আপনি ভাবছেন যে আমি কীভাবে এই ফাংশনটিকে উইন্ডো পুনরায় আকার দেওয়ার ইভেন্টগুলি পেতে বলি? এখানে কীভাবে রয়েছে: অ্যাডএভেন্ট (উইন্ডো, "রাইজাইজ", ফাংশন_রিফারেন্স); :)

— ওবারকা

মনে রাখবেন যে আইই 11 হিসাবে, attachEventআর সমর্থিত নয়। ভবিষ্যতের জন্য পছন্দসই উপায় addEventListener।

— লুক

সঙ্গে সাবধান elem == undefined। এটি সম্ভব (যদিও অসম্ভব) তবে স্থানীয়ভাবে "অপরিবর্তিত" অন্য কিছু হিসাবে সংজ্ঞায়িত হয়েছে। stackoverflow.com/questions/8175673/…

— লূক

Answer 4

পুনরায় আকারের ইভেন্টটি কখনই সরাসরি ব্যবহার করা উচিত নয় কারণ এটি আমাদের আকার পরিবর্তন করার সাথে সাথে অবিচ্ছিন্নভাবে চালিত হয়।

অতিরিক্ত কলগুলি প্রশমিত করতে একটি ডেবিউ ফাংশন ব্যবহার করুন।

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

এখানে জলের চারদিকে প্রচলিত একটি সাধারণ উত্সাহ রয়েছে, যদিও লোডাসে আরও বেশি উন্নত লোকের সন্ধান করুন।

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);

এটি প্রতি 200 মিমিগুলিতে একবারের বেশি জ্বলবে না।

মোবাইল ওরিয়েন্টেশন পরিবর্তনের জন্য ব্যবহার করুন:

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

খুব সুন্দরভাবে এটি যত্ন নেওয়ার জন্য আমি এখানে একটি ছোট লাইব্রেরি রেখেছি।

Comments

আমি এই তথ্যের প্রশংসা করি: ডাবনো (এটি এখন একটি অমূল্য ধারণা / ফাংশন বলে মনে হচ্ছে যদিও আমি আগে এইভাবে টাইমআউটগুলি ব্যবহার করে প্রতিরোধ করেছি), লোডাশ (যদিও আমি ব্যক্তিগতভাবে নিশ্চিত নই) এবং অ্যাড-এভেন্টকে ফলব্যাক হিসাবে ব্যবহার করতে হবে কিনা সে সম্পর্কে অস্পষ্টতাটি সমাধান করে অ্যাডভেন্টলিস্টনার যুক্ত করতে (শুধুমাত্র কারণ পুরানো উত্তরগুলি এ সম্পর্কিত মন্তব্যগুলিতে স্পষ্টভাবে স্পষ্ট করে না)

— 0:03

FYI যেহেতু আপনি ES6 তীর ফানক সংকেত ব্যবহার করছেন তাই অভ্যন্তরীণ ফাংশনটির (...arguments) => {...}(বা ...argsকম বিভ্রান্তির জন্য) থাকা দরকার কারণ argumentsভেরিয়েবলটি তাদের সুযোগটি আর উপলব্ধ নেই।

— কোডরেচেট

আমি পুরোপুরি সচেতন, এই স্নিপেটটি আমার কোড নয়, এটি একটি উদাহরণ হিসাবে।

— ফ্রন্টসাইডআপ

দুর্দান্ত উত্তর, আকারের সাথে পারফেক্ট ইস্যুগুলির সমাধান করা দরকার! ডিবাউনিং একটি বিকল্প, অন্যটি হ'ল সরল থ্রোটলিং (যা "ধাপগুলিতে" পুনরায় আকার দেওয়ার জন্য আপনার ইউআই প্রয়োজন হলে যাবার উপায় হতে পারে)। দেখুন bencentra.com/code/2015/02/27/optimizing-window-resize.html উদাহরণের জন্য

— রবিন Métral

Answer 5

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);

বর্তমানে ফায়ারফক্স, ক্রোম এবং সাফারি এটিকে সমর্থন করে । অন্যান্য (এবং আরও পুরানো) ব্রাউজারগুলির জন্য আপনাকে পলিফিল ব্যবহার করতে হবে ।

Comments

এখনও 2020 ইমোতে সেরা উত্তর

— জেসি রেজা খোরাসানী

এমডিএন লিংক: ডেভেলপার.মোজিলা.আর.ইন-

— রিড

Answer 6

আমি বিশ্বাস করি যে সঠিক উত্তর ইতিমধ্যে @ অ্যালেক্স ভি দ্বারা সরবরাহ করা হয়েছে, তবুও উত্তরটি বর্তমানে কিছুটা আধুনিকীকরণের প্রয়োজন কারণ এটি এখন পাঁচ বছরেরও বেশি পুরানো।

দুটি প্রধান সমস্যা আছে:

1. objectপ্যারামিটারের নাম হিসাবে কখনও ব্যবহার করবেন না । এটি একটি সংরক্ষিত শব্দ। এটি বলা হচ্ছে, @ অ্যালেক্স ভি এর সরবরাহিত ফাংশন কাজ করবে না strict mode।

2. addEvent@Alex ভী দ্বারা উপলব্ধ ফাংশন ফেরত দেয় না event objectযদি addEventListenerপদ্ধতি ব্যবহার করা হয়। এটির addEventঅনুমতি দেওয়ার জন্য ফাংশনে আরও একটি প্যারামিটার যুক্ত করা উচিত ।

দ্রষ্টব্য: নতুন প্যারামিটারটি addEventalচ্ছিক করা হয়েছে যাতে এই নতুন ফাংশন সংস্করণে স্থানান্তর করা এই ফাংশনে কোনও পূর্ববর্তী কলগুলিকে ভঙ্গ না করে। সমস্ত উত্তরাধিকার ব্যবহার সমর্থন করা হবে।

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);

Comments

আমি যুক্তি দিয়ে বলব যে সংযুক্তিভেন্ট 2017 এ আর প্রাসঙ্গিক নয়

— ভ্লাদ নিকুলা

পছন্দ করুন

— ওয়েবউন্ডারার

Answer 7

Http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html এ আমার ব্লগ পোস্টটি উল্লেখ করার জন্য ধন্যবাদ ।

আপনি যখন স্ট্যান্ডার্ড উইন্ডো রিজাইজ ইভেন্টটি সন্ধান করতে পারেন, আপনি দেখতে পাবেন যে আইআই-তে, ইভেন্টটি প্রতি এক্স এর জন্য একবার এবং প্রতিটি ওয়াই অক্ষের চলাচলের জন্য একবার চালিত হয়, ফলস্বরূপ এক টন ইভেন্টগুলি বরখাস্ত হয় যার পারফরম্যান্স থাকতে পারে আপনার সাইটের উপর প্রভাব যদি রেন্ডারিং একটি নিবিড় কাজ হয়।

আমার পদ্ধতিতে একটি সংক্ষিপ্ত সময়সীমা জড়িত যা পরবর্তী ইভেন্টগুলিতে বাতিল হয়ে যায় যাতে ব্যবহারকারী উইন্ডোটির আকার পরিবর্তন না করা অবধি ইভেন্টটি আপনার কোডটিতে বুদবুদ না হয়ে যায়।

Answer 8

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

Comments

উপরের মতামতগুলির অনেকগুলিই বলেছে, অনারসাইজ ফাংশনটি ওভাররাইট না করা ভাল; বরং একটি নতুন ইভেন্ট যুক্ত করুন। জন্ডলমের উত্তর দেখুন।

— লুক

Answer 9

নিম্নলিখিত ব্লগ পোস্ট আপনার জন্য দরকারী হতে পারে: আইই মধ্যে উইন্ডো পুনরায় আকার ইভেন্ট ফিক্সিং

এটি এই কোড সরবরাহ করে:

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);
}

Comments

এইটি কেবলমাত্র

— এএসপি.এনইটি

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

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

</script>

Answer 12

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_];
        }
    }
}