Как заставить работать @HostListener('body:resize') на angular6?

Question

[Malkolm]

У меня небольшое приложение на angular6 с роутингом.

в главном appComponent пытаюсь использовать @HostListener()

@HostListener('window:resize', ['$event'])
   onResize(event) {
     console.log("window:resize")
   }
   @HostListener('body:resize')
   onResize2(event) {
     console.log("body:resize")
   }
   @HostListener('resize', ['$event'])
   onResize3(event) {
     console.log("resize")
   }

это просто в разных вариантах уже указал.
но из всех вариантов, которые я пробовал сработал только 1:

@HostListener('window:resize', ['$event'])
   onResize(event) {
     console.log("window:resize")
   }

и то только когда я руками меняю ширину.

А задача такая:
у меня в компоненте есть некий шаблон и роутинг
при перемещении по страницам или при изменении контента на одной странице (будь то изменения которые произошли из-за того что я где-то чтото нажал или поступили данные с бекэнда) мне надо перехватывать события изменения размера body или html (на самом деле они одинаковые должны быть вроде-бы), в этот момент получать высоту контента всей страницы и выполнять спец запрос на изменение размера контейнаре фрейма (приложение встраивается через фрейм в другое место и если надо изменить размер фрейма можно просто кинуть запрос из фрейма на родительский документ)

Answer 1

[Demian Smith]

HostListener в этом вопросе не поможет, потому что изменение высоты body не порождает событие JS.

Идеологически правильным ходом было бы сделать изменение высоты ифрейма проблемой пользователя приложения, а не проблемой самого приложения. В любом случае пользователи будут городить какие-то огороды на прослушивание событий от приложения. Вместо этого можно заюзать, например, вот такую либу https://github.com/davidjbradshaw/iframe-resizer . В этом случае гора по обнаружения изменения высоты тела страницы сваливается с плеч приложения на плечи компонента, который специально создан для таких ситуаций.

Comments

[Malkolm]

Может я просто не совсем правильно описал, но суть в том, что мое приложение встраивается в "чужой" сайт посредством iframe и по умолчанию высота фрейма 600px. Но если надо, то этот размер можно поменять. Для этого надо отправить parent.postMessage(); и в параметрах указать что надо изменить размер на такой-то.
У меня в приложении несколько страниц и некоторые с длинным контентом, некоторые с коротким и надо чтобы этот фрейм подстраивался под контент общий

[Demian Smith]

Malkolm, суть проблемы понятна. Смотрите. Ваше приложение встраивается в чужой сайт. И то как оно будет отображаться на чудом сайте - это проблема самого сайта, а не проблема вашего приложения. Всегда можно как-то выкрутиться и послать parent.postMessage(), но это будет нарушением правила единой ответсвенности.

Пользователь, который будет встраивать вашу программу в свой дизайн уже должен написать кокой-то код, который реагирует на parent.postMessage(). Так зачем парить вам мозги и просить делать postMessage(), когда существует способ определения изменения высоты контента без внесения изменений в ваше приложение? Другими словами, зачем распылять решение проблемы на 2 приложения, если её можно решить в одном?

[Demian Smith]

Malkolm, ну если вам уж позарез нужно именно parent.postMessage() делать, то смотрите в сторону MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/M...

Он порождает события на изменения DOM - это вроде как раз оно

[Demian Smith]

Malkolm, Вот статья о том как это запилить https://nitayneeman.com/posts/listening-to-dom-cha...

[Malkolm]

Demian Smith,

Пользователь, который будет встраивать вашу программу в свой дизайн уже должен написать кокой-то код, который реагирует на parent.postMessage().

такой код как раз есть. Он принимает мой parent.postMessage() в котором я указываю какие размеры фрейма мне нужны, а он их и выставляет. Задача с моей стороны как раз и состоит в том чтобы сообщить ему что он должен размер фрейма увеличить, когда контент моего приложения становится слишком большим. Это значит что мне надо за своим контентом следить и давать ему знать когда я хочу чтобы он изменил размер фрейма, разве нет?

За MutationObserver спасибо, он подходит, хотя и будет наверное тяжеловат (надо попробовать)

[Demian Smith]

Malkolm, так это ведь native browser API. Оно для пользователя 0kb весит. Даже не знаю что может быть легче.

[Malkolm]

Demian Smith, тяжеловат в смысле там же DOM постоянно меняться будет при активной работе, поэтому надо подумать как сделать чтобы он не так часто дергал