JavaScript窗口调整大小事件-Java 学习之路

523

如何挂钩浏览器窗口调整大小事件？

有a jQuery way of listening for resize events但我宁愿不把它带入我的项目只是为了这一个要求 .

12 回答

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

回复于 2024-04-29T16:44:33+08:00

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

</script>

回复于 2024-04-29T16:44:33+08:00

如果你想要做的只是调整窗口和窗口的大小，上面提到的解决方案将会起作用 . 但是，如果要将调整大小传播到子元素，则需要自己传播事件 . 以下是一些示例代码：

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

回复于 2024-04-29T16:44:33+08:00

489

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

回复于 2024-04-29T16:44:33+08:00

不应该直接使用resize事件，因为在调整大小时它会连续触发 .

使用去抖功能可以缓解多余的呼叫 .

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

它永远不会每200ms发射一次以上 .

对于移动方向更改，请使用

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

这是一个整齐地照顾这个问题的small library .

回复于 2024-04-29T16:44:33+08:00

我相信@Alex V已经提供了正确的答案，但答案确实需要一些现代化，因为它已经超过五年了 .

有两个主要问题：

切勿使用 object 作为参数名称 . 这是一个保留的词 . 有了这个说法，@ Alex V提供的功能将无法在 strict mode 中使用 .
如果使用 addEventListener 方法，@ Alex V提供的 addEvent 函数不会返回 event object . 应将另一个参数添加到 addEvent 函数以允许此操作 .

NOTE: The new parameter to addEvent has been made optional so that migrating to this new function version will not break any previous calls to this function. All legacy uses will be supported.

这是更新后的 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);

回复于 2024-04-29T16:44:33+08:00

19
首先，我知道上面的评论中已经提到了 addEventListener 方法，但我没有采用't see any code. Since it'首选方法，这里是：
```
window.addEventListener('resize', function(event){
  // do stuff here
});
```
Here's a working sample .
回复于 2024-04-29T16:44:33+08:00
562

感谢您在http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html引用我的博文 .

虽然您可以直接连接到标准窗口调整大小事件，但您会发现在IE中，每个X触发一次事件，每个Y轴移动触发一次，导致大量事件被触发，可能具有性能如果渲染是一项密集型任务，则会影响您的网站 .

我的方法涉及在后续事件中取消的短暂超时，以便在用户完成窗口大小调整之前，事件不会冒泡到您的代码 .

回复于 2024-04-29T16:44:33+08:00
10

Solution for 2018+:

你应该使用ResizeObserver . 它将是一个浏览器本机解决方案，具有比使用 resize 事件更好的性能 . 此外，它不仅支持 document 上的事件，还支持任意 elements .

var ro = new ResizeObserver（entries => {
for（输入条目）{
const cr = entry.contentRect;
console.log（'Element：'，entry.target）;
console.log（元素大小：$ {cr.width} px x $ {cr.height} px）;
console.log（元素填充：$ {cr.top} px; $ {cr.left} px）;
}
}）;

//观察一个或多个元素
ro.observe（someElement）;

目前，只有Chrome supports it but other browsers will likely follow（很快） . 现在你必须使用polyfill .

回复于 2024-04-29T16:44:33+08:00
1
jQuery只是包装标准的 resize DOM事件，例如 .
```
window.onresize = function(event) {
    ...
};
```
jQuery可能会做一些工作来确保在所有浏览器中一致地触发resize事件，但是我鼓励你在Firefox，Safari和IE中进行测试 .
回复于 2024-04-29T16:44:33+08:00

444

永远不要覆盖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');
});

回复于 2024-04-29T16:44:33+08:00

8

以下博客文章可能对您有用：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）;
}

回复于 2024-04-29T16:44:33+08:00

JavaScript窗口调整大小事件

12 回答

相关问题