Ответ 1
События изменения размера: no go
Большинство браузеров не поддерживают события изменения размера на чем-либо, кроме объекта окна. Согласно этой странице, только Opera поддерживает обнаружение документов для изменения размера. Вы можете использовать тестовую страницу, чтобы быстро протестировать ее в нескольких браузерах. Другой источник, который упоминает событие изменения размера элемента body, также отмечает, что он не работает. Если мы рассмотрим эти сообщения об ошибках для Internet Explorer, мы узнайте, что с огнем события изменения размера для произвольных элементов была функция только для Internet Explorer, так как удалена.
Object.observe: возможно, в будущем
Был предложен более общий метод определения изменений свойств и, скорее всего, будет реализован кросс-браузер: Object.observe(), Вы можете наблюдать за любым свойством изменений и запускать функцию, когда это произойдет. Таким образом, вы можете наблюдать за элементом, и когда какое-либо изменение свойства, например clientWidth или clientHeight, вы получите уведомление. В настоящее время он работает только в Chrome с включенным экспериментальным флагом Javascript. Кроме того, это глючит. Я мог только заставить Chrome уведомлять меня о свойствах, которые были изменены внутри Javascript, а не свойствах, которые были изменены браузером. Экспериментальный материал; может или не может работать в будущем.
Текущее решение
В настоящее время вам придется выполнять грязную проверку: присвойте значение свойства, которое вы хотите просмотреть для переменной, а затем проверьте, изменилось ли оно каждые 100 мс. Например, если на странице есть следующий HTML-код:
<span id="editableSpan" contentEditable>Change me!</span>
И этот script:
window.onload = function() {
function watch(obj, prop, func) {
var oldVal = null;
setInterval(function() {
var newVal = obj[prop];
if(oldVal != newVal) {
var oldValArg = oldVal;
oldVal = newVal;
func(newVal, oldValArg);
}
}, 100);
}
var span = document.querySelector('#editableSpan');
// add a watch on the offsetWidth property of the span element
watch(span, "offsetWidth", function(newVal, oldVal) {
console.log("width changed", oldVal, newVal);
});
}
Это работает аналогично Object.observe и, например, функции watch в структуре AngularJS. Это не идеально, потому что со многими такими проверками у вас будет много кода, работающего каждые 100 мс. Кроме того, любое действие будет отложено на 100 мс. Вы могли бы улучшить это, используя requestAnimationFrame вместо setInterval. Таким образом, обновление будет замечено всякий раз, когда браузер перерисовывает вашу веб-страницу.