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

2020/10/11 07:01 · javascript ·  · 0评论

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

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

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);
});
$(window).bind('resize', function () { 

    alert('resize');

});

这是利用jQuery调整大小事件的非jQuery方法:

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

它适用于所有现代浏览器。不是油门东西给你。这是一个实际的例子

抱歉,调出一个旧线程,但是如果某人不想使用jQuery,则可以使用以下方法:

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

由于您对jQuery开放,因此该插件似乎可以解决问题。

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

编辑:

)*实际上
技术上并不相同,正如WraithKennyHenry Blyth的评论中所指出和解释的那样

jQuery$(window).resize()默认提供功能:

<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
    $rightPanelData = $( '.rightPanelData' )
    $leftPanelData = $( '.leftPanelData' );

//jQuery window resize call/event
$window.resize(function resizeScreen() {
    // console.log('window is resizing');

    // here I am resizing my div class height
    $rightPanelData.css( 'height', $window.height() - 166 );
    $leftPanelData.css ( 'height', $window.height() - 236 );
});
</script> 

我认为jQuery插件“ jQuery调整大小事件”是对此的最佳解决方案,因为它可以对事件进行限制,以便在所有浏览器中都可以正常工作。它类似于Andrews的答案,但是更好,因为您可以将resize事件挂接到特定的元素/选择器以及整个窗口。它为编写干净的代码开辟了新的可能性。

该插件在这里可用

如果您添加大量侦听器,则会出现性能问题,但是对于大多数使用情况而言,它是完美的。

我认为您应该对此进行进一步的控制:

    var disableRes = false;
    var refreshWindow = function() {
        disableRes = false;
        location.reload();
    }
    var resizeTimer;
    if (disableRes == false) {
        jQuery(window).resize(function() {
            disableRes = true;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(refreshWindow, 1000);
        });
    }

希望对jQuery有帮助

如果已有功能,请先定义一个功能,然后跳到下一步。

 function someFun() {
 //use your code
 }

浏览器调整这些大小。

 $(window).on('resize', function () {
    someFun();  //call your function.
 });

除了提到的窗口调整大小功能外,重要的是要了解如果使用调整大小事件时会触发很多事件,而又不会使事件发生冲突。

保罗·爱尔兰(Paul Irish)具有出色的功能,可以很好地消除调整大小的声音。强烈建议使用。跨浏览器工作。前几天在IE8中对其进行了测试,一切都很好。

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

请务必查看演示以查看区别。

这是完整性的功能。

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});
本文地址:http://javascript.askforanswer.com/kualiulanqichuangkoudiaozhengdaxiaoshijian-javascript-jquery.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!