Как динамически изменить ширину и высоту тега iframe?

На чтение 4 мин Опубликовано 17.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаги по изменению ширины и высоты <iframe>:
Полный пример HTML и CSS
HTML файл
CSS файл
Заключение
SEO Оптимизация

Вопрос или проблема

Мой <iframe> тег содержит виджет чата; этот виджет чата содержит кнопку, которая показывает и скрывает входящие сообщения чата. Как мне изменить его так, чтобы он изменял свою ширину и высоту в зависимости от того, видимы ли входящие сообщения или нет?

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
   
    <title>Главная страница</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">
      <p style="color: white; font-size: 50px">Это HTML страница</p>
    </div>

    <iframe src="http://localhost:5010/widget" id="target"></iframe>
  </body>
</html>

CSS

.box {
  width: 500px;
  height: 500px;
  background-color: brown;
}

#target {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: red;
  border: none;
  width: 350px;
  height: 100%;
}

Вот скриншот виджета чата – кликните здесь

Я пытался использовать этот метод, но он не работает

window.addEventListener("message", function (event) {
        console.log("событие сообщения вызвано");

        const iframe = document.getElementById("target");
        const { width, height } = event.data;

        if (width && height) {
          iframe.style.width = width + "px";
          iframe.style.height = height + "px";
        }
      });

Ответ или решение

Чтобы динамически изменять ширину и высоту тега <iframe>, основанную на видимости чат-инбокса, необходимо использовать JavaScript. Вы можете обмениваться сообщениями между родительской страницей и содержимым, загруженным в <iframe>, с помощью механизма посторонних сообщений (postMessage). Давайте рассмотрим шаги, которые вам нужно выполнить для достижения этой цели.

Шаги по изменению ширины и высоты `<iframe>`:

Настройка Chat Widget для отправки сообщений: Элементы внутри вашего <iframe>, т.е. чат-виджет, должны отправлять сообщения, когда инбокс открывается или закрывается. Это может выглядеть так:

// Внутри вашего chat widget (код, работающий в самом iframe)
function toggleInbox(isVisible) {
   // Send a message to the parent window with new dimensions
   const dimensions = {
       width: isVisible ? '400' : '350', // Пример новых ширины
       height: isVisible ? '600' : '100%' // Пример новых высоты
   };
   window.parent.postMessage(dimensions, '*');
}

Обработка сообщений в родительском окне: Теперь вам нужно настроить обработчик событий в родительском окне, который будет изменять размеры <iframe> при получении сообщения:

// В родительском документе
window.addEventListener("message", function(event) {
   // Проверьте источник сообщения для безопасности, если это необходимо
   // if (event.origin !== "http://localhost:5010") return;

   console.log("Сообщение получено:", event.data);

   const iframe = document.getElementById("target");
   const { width, height } = event.data;

   if (width && height) {
       iframe.style.width = width + "px";
       iframe.style.height = height === '100%' ? '100%' : height + "px"; // Чтобы поддерживать процентные значения
   }
});

Полный пример HTML и CSS

Теперь соберем это в полный пример с использованием вашей существующей структуры.

HTML файл

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Родительская страница</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="box">
        <p style="color: white; font-size: 50px">Это HTML страница</p>
    </div>

    <iframe src="http://localhost:5010/widget" id="target"></iframe>

    <script>
        window.addEventListener("message", function(event) {
            console.log("Сообщение получено:", event.data);

            const iframe = document.getElementById("target");
            const { width, height } = event.data;

            if (width && height) {
                iframe.style.width = width + "px";
                iframe.style.height = height === '100%' ? '100%' : height + "px"; 
            }
        });
    </script>
</body>
</html>

CSS файл

.box {
    width: 500px;
    height: 500px;
    background-color: brown;
}

#target {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: red;
    border: none;
    width: 350px; /* Начальная ширина */
    height: 100%; /* Начальная высота */
}

Заключение

Динамическое изменение размеров <iframe> в зависимости от состояния чат-инбокса возможно благодаря технологии посторонних сообщений. Убедитесь, что вы корректно настраиваете отправку и обработку сообщений для получения желаемого эффекта.

SEO Оптимизация

Для повышения SEO эффективности страницы, убедитесь, что заголовки и метаданные содержат ключевые слова, такие как "интерактивный чат", "изменение размеров iframe" и "веб-интеграция". Это поможет облегчить поиск вашей страницы пользователями, заинтересованными в подобной функциональности.