677

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

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

4

13 に答える 13

708

ベスト プラクティスは、サイズ変更イベントにアタッチすることです。

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

jQuery は、標準のresizeDOM イベントをラップしているだけです。

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

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

于 2009-03-13T08:58:05.363 に答える
613

まず、上記のコメントでメソッドが言及されていることは知ってaddEventListenerいますが、コードは見当たりませんでした。これが好ましいアプローチであるため、次のとおりです。

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

これが実際のサンプルです。

于 2013-08-29T20:32:33.057 に答える
535

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');
});
于 2010-06-30T14:19:45.970 に答える
16

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

主な問題は 2 つあります。

  1. objectパラメータ名として使用しないでください。予約語です。これが言われていると、@Alex V の提供された関数は では機能しませんstrict mode。

  2. @Alex V が提供する関数は、メソッドが使用された場合にaddEventを返しません。これを可能にするには、別のパラメーターを関数に追加する必要があります。event objectaddEventListeneraddEvent

注:addEventこの新しい関数バージョンに移行しても、この関数への以前の呼び出しが中断されないように、新しいパラメーター to はオプションになりました。すべてのレガシー使用がサポートされます。

これらの変更を加えた更新された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);
于 2015-10-05T18:38:42.377 に答える
11

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

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

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

于 2009-12-05T18:50:43.967 に答える
7 
window.onresize = function() {
    // your code
};
于 2009-11-16T05:27:55.777 に答える
5

次のブログ記事が役に立つかもしれません: Fixing the window resize event in 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);
}
于 2009-03-13T09:00:25.313 に答える
3

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

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

resize イベントの最初の Arg として渡されるイベント オブジェクト。例えば：

var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
  ...
  event.preventDefault();
});
于 2014-04-20T03:55:19.340 に答える
1 
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_];
        }
    }
}
于 2015-09-01T18:18:00.973 に答える
1 
<script language="javascript">
    window.onresize = function() {
    document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
} 

</script>
于 2011-04-13T20:30:10.903 に答える