当前位置:  开发笔记 > 编程语言 > 正文

跨浏览器窗口调整大小事件 - JavaScript/jQuery

如何解决《跨浏览器窗口调整大小事件-JavaScript/jQuery》经验,为你挑选了6个好方法。

在Firefox,WebKit和Internet Explorer中使用的窗口调整大小事件的正确(现代)方法是什么?

你可以打开/关闭两个滚动条吗?



1> Andrew Hedge..:

jQuery有一个内置的方法:

$(window).resize(function () { /* do something */ });

对于用户界面的响应起见,你可以考虑使用的setTimeout只有经过数毫秒打电话给你的代码,如下面的例子,启发这样:

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});


为什么在使用按钮将窗口扩展到全屏时不会触发此事件?
以利亚,这是JavaScript.你写的不正确(除了你用new构建的一个特定情况).
值得一提的是,这个jQuery函数"添加"函数调用当前应该在窗口调整大小上调用的函数列表.它不会覆盖当前在窗口调整大小上安排的现有事件.
@Sly对我而言,它适用于Mac上的Safari,Chrome和Mozilla.你使用哪种浏览器?
@Sly:`$('.button').on({click:function(){/*your code*/$(window).trigger('resize')})`
如果您不想使用jQuery,请参阅下面的[我的回答](http://stackoverflow.com/a/18745301/895558).

2> 小智..:
$(window).bind('resize', function () { 

    alert('resize');

});


我更喜欢绑定方法,因为resize()方法实际上实际上是完全绑定方法的快捷方式,我经常发现通常有多个事件处理程序I*应该应用于元素.

3> Jondlm..:

这是非jQuery方式进入resize事件:

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

它适用于所有现代浏览器.它并没有油门你什么.以下是它的实例.



4> javascript i..:

很抱歉打开一个旧线程,但如果有人不想使用jQuery,你可以使用:

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


请注意,这将破坏可能绑定到window.onresize的任何现有处理程序.如果您的脚本必须与其他脚本一起生活在一个生态系统中,那么您不应该假设您的脚本是唯一想要在窗口大小调整上执行某些操作的脚本.如果你不能使用像jQuery这样的框架,你至少应该考虑抓住现有的window.onresize,并将你的处理程序添加到它的末尾,而不是完全破坏它.
@TomAuger*"你至少应该考虑抓住现有的window.onresize,并将你的处理程序添加到它的末尾"* - 你可能意味着相反,即"在你的处理程序末尾调用现有的处理程序"?我真的希望看到一个javascript代码,它会在现有函数的末尾添加一些内容:-)

5> Paolo Bergan..:

由于你对jQuery开放,这个插件似乎可以解决问题.



6> bassim..:

使用jQuery 1.9.1我发现虽然在技术上完全相同)*,但这在IE10中不起作用(但在Firefox中):

// did not work in IE10
$(function() {
    $(window).resize(CmsContent.adjustSize);
});

虽然这适用于两种浏览器:

// did work in IE10
$(function() {
    $(window).bind('resize', function() {
        CmsContent.adjustSize();
    };
});

编辑:
)*实际上技术上并不完全相同,正如WraithKenny和Henry Blyth的评论中所指出和解释的那样.

推荐阅读
wangtao
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有