Динамическая загрузка комментариев с Телеграмма

Виджет комментариев Телеграмма обычно вставляется на сайт так:

<script async
  src="https://telegram.org/js/telegram-widget.js?22"
  data-telegram-discussion="bombingreview/13">
</script>

Однако, если на сайте динамическая навигация через AJAX, то это уже не сработает. Не нагуглил пример, так что делаю свой. В примере ниже динамически конструируется тег ⟨script⟩, он вставляется внутрь ⟨div#tgComments⟩, скрипт добавит ⟨iframe⟩ рядом с собой, и комментарии подгружаются. При смене урла страницы, эту операцию должно повторить, предварительно очистив ⟨div#tgComments⟩ от предыдущих комментариев.

HTML:

<div id="tgComments">
  <!-- place for <script> и <iframe> -->
</div>

<script>
  // do it on every url change
  const $tgComments = document.getElementById('tgComments')
  $tgComments.innerHTML = '' // cleanup previous comments
  loadTelegramComments('bombingreview', 13, $tgComments)
</script>

JavaScript:

function loadTelegramComments(tgChannelName, tgPostId, $parent) {
  var $script = document.createElement('script')
  $script.setAttribute('async', '')
  $script.setAttribute('src', 'https://telegram.org/js/telegram-widget.js?22')
  $script.setAttribute('data-telegram-discussion', tgChannelName + '/' + tgPostId)
  $script.setAttribute('data-comments-limit', '5')
  $script.setAttribute('data-dark', '1')
  $parent.appendChild($script)
}

2024.05.20 in webdev