JavaScriptウィンドウのサイズ変更イベント

https://stackoverflow.com/questions/641857

22-07-2019
|

質問

ブラウザウィンドウのサイズ変更イベントにフックするにはどうすればよいですか

サイズ変更イベントをリッスンするjQueryの方法がありますが、この1つの要件だけのために、プロジェクトにそれを持ち込むことを望まないでしょう。

解決

jQueryは、標準の resize DOMイベントをラップしているだけです。たとえば、

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

jQuery は、すべてのブラウザでサイズ変更イベントが一貫して発生するようにするための作業を行いますが、ブラウザのいずれかが異なるかどうかはわかりませんが、テストすることをお勧めしますFirefox、Safari、およびIE。

他のヒント

window.onresize関数をオーバーライドしないでください。

代わりに、オブジェクトまたは要素にイベントリスナーを追加する関数を作成します。これは、リスナーが機能しないことを確認して包み込み、最後の手段としてオブジェクトの機能をオーバーライドします。これは、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');
});

まず、上記のコメントで addEventListener メソッドが言及されていることを知っていますが、コードは表示されませんでした。推奨されるアプローチなので、ここにあります：

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

こちらが実用サンプルです。

サイズ変更イベントは、サイズ変更時に連続して発生するため、直接使用しないでください。

デバウンス機能を使用して、過剰なコールを軽減します。

window.addEventListener（ 'resize'、debounce（handler、delay、immediate）、false）;

これは、ネットの周りに浮かぶ一般的なデバウンスです。ただし、より高度なものは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);

200ミリ秒ごとに複数回起動することはありません。

モバイルの向きを変更する場合：

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

小さなライブラリを用意して、これをきちんと処理します。

正しい答えは@Alex Vによって既に提供されていると思いますが、その答えは現在5年以上経過しているため、ある程度の近代化が必要です。

主に2つの問題があります：

パラメーター名として object を使用しないでください。控えめな言葉です。とはいえ、@ Alex Vが提供する関数は strictモードでは機能しません。
addEventListener メソッドが使用されている場合、@ Alex Vが提供する addEvent 関数は eventオブジェクトを返しません。これを可能にするために、別のパラメーターを 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);

httpで私のブログ投稿を参照していただきありがとうございます：//mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html 。

標準のウィンドウサイズ変更イベントに接続するだけでも、IEでは、イベントがXごとに1回、Y軸の動きごとに1回発生し、大量のイベントが発生することがわかります。レンダリングが集中的なタスクである場合、サイトのパフォーマンスに影響があります。

私のメソッドには、ユーザーがウィンドウのサイズ変更を完了するまでイベントがコードにバブルされないように、後続のイベントでキャンセルされる短いタイムアウトが含まれます。

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でのみサポートされていますが、他のブラウザでもすぐにサポートされる可能性があります（すぐに）。今のところ、ポリフィルを使用する必要があります。

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

次のブログ投稿が役立つ場合があります。 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);
}

ウィンドウとウィンドウのみのサイズを変更するだけの場合は、上記の解決策が機能します。ただし、サイズ変更を子要素に伝達する場合は、イベントを自分で伝達する必要があります。これを行うためのサンプルコードを次に示します。

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

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

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

</script>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow