Выполнение javascript-кода при изменении размеров окна браузера

Рейтинг: 0Ответов: 2Опубликовано: 03.07.2011

Нужно вызывать javascript-код:

  1. после загрузки страницы
  2. при изменении размеров окна браузера

Вот этот код работает для первого случая и почему-то не работает для второго:

$(function() {
  $(window).resize(doSomethingUseful());
});

function doSomethingUseful() {
  $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>');
}

А вот этот работает для второго случая, но не работает для первого:

$(function() {
  $(window).resize(function() {
    $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>');
  });
});

См. два тестовых примера ниже - их можно скопипастить, сохранить и запустить.

Какой код будет работать для обоих случаев?

Дополнено из комментариев.

Тестовый пример 1:

<html>
<head>
  <title>resize</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(window).resize(doSomethingUseful());
    });

    function doSomethingUseful() {
      $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>');
    }
  </script>
</head>
<body>
  <div>hello world :)</div>
  <hr>
</body>
</html>

Тестовый пример 2:

<html>
<head>
  <title>resize</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(window).resize(function() {
        $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>');
      });
    });
  </script>
</head>
<body>
  <div>hello world :)</div>
  <hr>
</body>
</html>

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Вы в первом примере не указываете функцию обработчик события size, а вызываете ее. Замените $(window).resize(doSomethingUseful()); на $(window).resize(doSomethingUseful); в первом примере и все заработает.

▲ 4

Зачем использовать в подобных случаях jQuery?

window.onresize = func; // при изменении размеров браузера
window.onload   = func; // при загрузке страницы.

Я понимаю, jQuery многофункционален и удобен, но есть случаи когда он излишен, а творение рук программиста с его использования - огромнейший костыль.