跨浏览器窗口调整大小事件 - JavaScript / jQuery-Java 学习之路

238

在Firefox，WebKit和Internet Explorer中使用的窗口调整大小事件的正确（现代）方法是什么？

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

11 回答

5

我认为jQuery插件“jQuery resize event”是最好的解决方案，因为它负责限制事件，以便它在所有浏览器中都能正常工作 . 它类似于安德鲁斯的答案，但更好，因为你可以将resize事件挂钩到特定的元素/选择器以及整个窗口 . 它为编写干净的代码开辟了新的可能性 .

该插件可用here

如果你添加了很多听众，就会出现性能问题，但对于大多数用例来说，它是完美的 .

回复于 2024-05-04T07:09:16+08:00

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>

回复于 2024-05-04T07:09:16+08:00

我认为你应该对此进一步加以控制：

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

回复于 2024-05-04T07:09:16+08:00

jQuery有built-in method为此：

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

为了实现UI响应，您可以考虑使用setTimeout仅在几毫秒后调用代码，如以下示例所示，受this启发：

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

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

回复于 2024-05-04T07:09:16+08:00

$(window).bind('resize', function () { 

    alert('resize');

});

回复于 2024-05-04T07:09:16+08:00

48
这是非jQuery方式进入resize事件：
```
window.addEventListener('resize', function(event){
  // do stuff here
});
```
它适用于所有现代浏览器 . 它会为你节制任何东西 . Here is an example它在行动中 .
回复于 2024-05-04T07:09:16+08:00
363
很抱歉打开一个旧线程，但如果有人不想使用jQuery，你可以使用：
```
function foo(){....};
window.onresize=foo;
```
回复于 2024-05-04T07:09:16+08:00
4

由于您对jQuery持开放态度，this plugin似乎可以解决问题 .

回复于 2024-05-04T07:09:16+08:00
8
使用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();
    };
});
```
编辑：
）*实际 not 技术上相同，如WraithKenny和Henry Blyth的评论中所述和解释的那样 .
回复于 2024-05-04T07:09:16+08:00
39
hope it will help in jQuery

首先定义一个函数，如果有现有函数则跳到下一步 .
```
function someFun() {
 //use your code
 }
```
浏览器调整大小使用这些 .
```
$(window).on('resize', function () {
    someFun();  //call your function.
 });
```
回复于 2024-05-04T07:09:16+08:00

除了提到的窗口调整大小函数之外，重要的是要理解调整大小事件如果在没有使事件消失的情况下使用则会激活很多 .

保罗爱尔兰有一个很好的功能，可以大肆调整大小调整 . 非常推荐使用 . 跨浏览器工作 . 前几天在IE8中测试过，一切都很好 .

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

确保check out the demo看到差异 .

这是完整性的功能 .

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

回复于 2024-05-04T07:09:16+08:00

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

11 回答

相关问题