Отлов изменения размера элемента. Какие способы есть?
 

Стоит задача: ловить изменения размеров определенного div'а. Суть - есть некий виджет, ему нужно реагировать на изменения его размера.

Изменение размеров может наступить по множеству причин:
1) изменение размеров окна пользователем
2) изменение размеров самого элемента пользователем через нативный ресайзер (css: resize:both)
3) изменение размеров предков любым способом, в случае когда у нашего элемента заданы размеры в процентах.

Какие есть варианты?

Deff уже предложил варианты с iframe и конечно же setInterval

Для отслеживания прямого изменения размера через ресайзер можно отслеживать изменение атрибута style используя MutationObserver. Это не подходит в остальных случаях.

Тут более полный код «onresize» через фрейм => http://habrahabr.ru/post/166321/

Простой пример - я делаю расширение для браузера, которое заменяет textarea на редактор кода. Редактор должен обновлять свой view при своем ресайзе. Тут только два варианта - setTimeout либо iframe. Тема , о которой говорят в комментах, типа приложение должно триггерить событие тут ваще не к месту. Короче, люди не думая комментят, считая что самые умные.

Может есть еще какие-нибудь интересные трюки?

И что насчет потребления ресурсов? Дорого ли стоит iframe?
Что указывать в src? вобще не указывать? Не будет ли проблем со всякими noscript и операми?

Пустой фрейм, (в отличие от фрейма с наличием src), - создаётся на странице в Опере и Хроме менее 25ms.
В в Опере и Хроме обычно тег следущий за пустым iframe исполняется - рендиться на странице уже при полностью исполненном в DOM элементе(т.е отследить загрузку пустого iframe скриптом, установленным сразу после тега <iframe в Опере и Хроме часто уже невозможно, (что легко делается при "непустом", т.е <iframe с наличием src и адресом )...В ИЕ 6 создание пустого фрейма менее 200 ms.

<script type="text/javascript">
var N=new Date().getTime();
function Tst(){
  N = new Date().getTime()-N;
  alert('Cкорость создания = '+N+'ms');
}

</script>
<!--тест -->
<div  id="Test" style="position:relative;border:red solid 1px;width:200px;height:100px;">
<iframe name="frame" width=100% height=100% style="position:absolute;z-index:-1" onload="Tst()"></iframe>
</div>

Пустой фрейм достаточно часто используется в javascript при создании пользовательских приложений с развязкой javascript библиотек.
К примеру на главной - используем для скорости только нативный ява-скрипт, в динамически создаваемом фрейме - подгружаем(создаем скриптом) тег скрипта подгружаемой библиотеки и необходимый контент,а по окончании работы, фрейм просто изымаем из Dom вместе с библиотеками.

Запускаем во фрейме библиотеку и выполняем чтение HTML на родителе фреймворком

<script>

function TestLibFrame() {
  window.docThis = frame1.parent.document;
  window.$$ = frame1.jQuery;
  var str = 'Запускаем jQuery на  странице без библиотеки:';
  alert(str +'\n\n' + $$("html",docThis).html()) 
} setTimeout("if('\v'=='v'){TestLibFrame()}",200); //Запуск для ИЕ;

function Funk0(aa) {
var a='Cтавим javascript - библиотеку во фрейм'
var iframe = aa
var iframeDoc = iframe.contentWindow.document;
var b = iframeDoc.createElement('div');
b.innerHTML=a;//alert(b.innerHTML)
iframeDoc.body.appendChild(b);
var s = iframeDoc.createElement('script');
s.setAttribute("type","text/javascript");
s.src = "http://yandex.st/jquery/1.4.4/jquery.min.js";
//s.setAttribute("onload","parent.TestLibFrame()");
s.onload = TestLibFrame;
b.appendChild(s);
}

</script>
<iframe name=frame1 onload="Funk0(this)"></iframe>