Как автоматически подстраивать высоту iframe для встроенных записей WordPress

Поддержка WordPress
10

Я давно задумывался об этом. Вот доказательство концепции (обратите внимание, что это не решает проблему удаления полос прокрутки из iframe).

Добавьте тег script в пост, который вы встраиваете:

<script>
    function sendHeight() {
        const body = document.body,
            html = document.documentElement;

        const height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);

        window.parent.postMessage({
            'iframeHeight': height,
            'iframeId': 'zalgFrame' // Используйте уникальный идентификатор, если у вас несколько iframe
        }, '*'); // Для безопасности лучше указать домен родительского окна
    }

    // Отправить начальную высоту
    window.onload = sendHeight;

    // Опционально: обновлять высоту при изменении размера окна или других событиях
    window.onresize = sendHeight;
</script>

В скрипте я использую идентификатор "zalgFrame".

В вашей теме Discourse:

<script type="text/discourse-plugin" version="1.29.0">
let iframeHeight, iframeId;
window.addEventListener('message', (event) => {
  if (event.origin !== "http://wp-discourse.test") return; // мой тестовый домен, замените на свой или закомментируйте
  // получаем высоту iframe, переданную из `wp-discourse.test`, и проверяем, совпадает ли iframeId с установленным мной
  if (event.data.iframeHeight && event.data.iframeId === 'zalgFrame') {
      // откройте страницу Discourse с iframe и консолью разработчика
      // вы увидите, как обновляются высоты, отправляемые с родительского сайта при изменении размера окна
      console.log("мы получили событие:" + event.data.iframeHeight); 
      iframeHeight = event.data.iframeHeight;
      iframeId = event.data.iframeId;
  }
  }, false);
</script>

В посте Discourse:

<div data-iframe-test-one>
<iframe src="http://wp-discourse.test/zalg_iframe/this-is-a-test-this-is-only-a-test/" width="100%" height="1659"></iframe>
</div>

Таким образом, можно получить фактическую высоту отрендеренного iframe из родительского окна.

Однако я не знаю, как передать высоту из данных обработчика событий в вызов api.decorateCookedElement. Кроме того, я не уверен, что это вообще поможет убрать вертикальную полосу прокрутки у длинных iframe. Если я попробую жестко задать большую высоту (1600px) в элементе iframe, полоса прокрутки всё равно появится.

Редактирование: для полноты картины:

<script type="text/discourse-plugin" version="1.29.0">
api.decorateCookedElement(
  (e) => {
    let iframeHeight, iframeId;

    function handleMessage(event) {
      if (event.origin !== "http://wp-discourse.test") return;
      if (event.data.iframeHeight && event.data.iframeId === "zalgFrame") {
        iframeHeight = event.data.iframeHeight;
        iframeId = event.data.iframeId;
        // исходя из предположения, что внутри div с атрибутом data-zalgFrame будет только один iframe
        let iframe = e.querySelector("[data-zalgFrame] iframe");
        if (iframe) {
          iframe.style.height = `${iframeHeight}px`;
        }
        // после установки фактической отрендеренной высоты iframe
        // удаляем обработчик событий
        window.removeEventListener("message", handleMessage, false);
      }
    }
    window.addEventListener("message", handleMessage, false);
  },
  { id: "component-id", onlyStream: true }
);
</script>

Для любого контента высотой более ~1000px кажется, что нет способа избежать добавления полосы прокрутки со стороны Discourse, поэтому я не рекомендую этот подход.

Я думаю, что ответ на вопрос автора оригинального поста (OP) таков: это в какой-то степени возможно, но, вероятно, не приносит особой пользы. (За исключением того, что я узнал о методе window.postMessage() :))