Видны ли в родителе изменения высоты текстового поля в iframe

Это сложный вопрос, потому что iframe — это полностью отдельный контекст, и коммуникация между родителем и iframe ограничена по соображениям безопасности. Расскажу про все варианты и ограничения.

1. Основная проблема: изоляция iframe

<!-- Parent page -->
<iframe id="myFrame" src="child.html"></iframe>

<!-- child.html (inside iframe) -->
<textarea id="text">Type here</textarea>

Проблема: Высота textarea внутри iframe НЕ влияет на высоту самого iframe. iframe имеет зафиксированную высоту (например, 300px), и содержимое скроллируется внутри.

<iframe id="myFrame" src="child.html" style="height: 300px;"></iframe>

Это похоже на вложенный браузер — он имеет свой размер, независимо от содержимого.

2. Решение 1: ResizeObserver + postMessage

Внутри iframe (child.html):

const textarea = document.getElementById('text');
const observer = new ResizeObserver((entries) => {
  // Когда textarea изменяет размер
  const height = textarea.scrollHeight; // Реальная высота содержимого
  
  // Отправляем информацию о высоте родителю
  window.parent.postMessage({
    type: 'height-changed',
    height: height
  }, '*');
});

observer.observe(textarea);

// Также отправляем начальную высоту
window.parent.postMessage({
  type: 'height-changed',
  height: textarea.scrollHeight
}, '*');

В родительской странице:

const iframe = document.getElementById('myFrame');

// Слушаем сообщения из iframe
window.addEventListener('message', (event) => {
  if (event.data.type === 'height-changed') {
    // Устанавливаем высоту iframe в соответствии с высотой textarea
    iframe.style.height = (event.data.height + 20) + 'px'; // +20px для паддинга
  }
});

Результат: iframe автоматически изменяет свою высоту в зависимости от содержимого.

3. Решение 2: MutationObserver + postMessage

Если ResizeObserver не поддерживается (старые браузеры):

// Внутри iframe
const textarea = document.getElementById('text');

const observer = new MutationObserver(() => {
  const height = textarea.scrollHeight;
  window.parent.postMessage({
    type: 'height-changed',
    height: height
  }, '*');
});

// Следим за изменениями в DOM
observer.observe(textarea, {
  attributes: true,
  characterData: true,
  subtree: true
});

// Также следим за input событиям
textarea.addEventListener('input', () => {
  const height = textarea.scrollHeight;
  window.parent.postMessage({
    type: 'height-changed',
    height: height
  }, '*');
});

4. Решение 3: Прямое обращение через contentWindow (если same-origin)

Если iframe находится на одном домене с родителем (same-origin):

// На родителе
const iframe = document.getElementById('myFrame');

iframe.onload = function() {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  const textarea = iframeDoc.getElementById('text');
  
  // Прямой доступ к textarea (работает только если same-origin)
  const observer = new MutationObserver(() => {
    iframe.style.height = (textarea.scrollHeight + 20) + 'px';
  });
  
  observer.observe(textarea, { characterData: true, subtree: true });
  
  // Или через ResizeObserver
  const resizeObserver = new ResizeObserver(() => {
    iframe.style.height = (textarea.scrollHeight + 20) + 'px';
  });
  resizeObserver.observe(textarea);
};

Важно: Это работает только если iframe и родитель на одном домене. Если iframe с другого домена — будет SecurityError.

5. CORS-безопасный способ с явным разрешением

Если iframe на другом домене, нужно явное разрешение в iframe:

<!-- parent.html на example.com -->
<iframe id="myFrame" src="https://other-domain.com/child.html"></iframe>

<!-- Нужно добавить атрибут для cross-origin общения -->
<script>
window.addEventListener('message', (event) => {
  // Проверяем origin для безопасности
  if (event.origin !== 'https://other-domain.com') return;
  
  if (event.data.type === 'height-changed') {
    document.getElementById('myFrame').style.height = event.data.height + 'px';
  }
});
</script>

<!-- child.html на other-domain.com -->
<script>
window.parent.postMessage({
  type: 'height-changed',
  height: 500
}, 'https://example.com'); // Указываем целевой origin для безопасности
</script>

6. Практический полный пример

Parent (index.html):

<!DOCTYPE html>
<html>
<head>
  <style>
    #myFrame {
      width: 100%;
      border: 1px solid #ccc;
      min-height: 200px;
      transition: height 0.2s ease;
    }
  </style>
</head>
<body>
  <h1>Parent Page</h1>
  <iframe id="myFrame" src="child.html"></iframe>
  
  <script>
    const iframe = document.getElementById('myFrame');
    
    window.addEventListener('message', (event) => {
      // Проверяем источник (безопасность)
      if (event.origin !== window.location.origin) return;
      
      if (event.data.type === 'height-changed') {
        // Обновляем высоту iframe
        const newHeight = event.data.height + 20; // паддинг
        iframe.style.height = newHeight + 'px';
        console.log(`iframe height changed to ${newHeight}px`);
      }
    });
  </script>
</body>
</html>

Child (child.html):

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; padding: 10px; }
    textarea {
      width: 100%;
      border: 1px solid #999;
      resize: vertical;
      min-height: 100px;
      font-family: Arial;
    }
  </style>
</head>
<body>
  <h2>Edit text below:</h2>
  <textarea id="text" placeholder="Type here..."></textarea>
  
  <script>
    const textarea = document.getElementById('text');
    
    // Функция для отправки высоты
    function sendHeight() {
      const height = textarea.scrollHeight;
      window.parent.postMessage({
        type: 'height-changed',
        height: height
      }, '*');
    }
    
    // Отправляем высоту при input
    textarea.addEventListener('input', sendHeight);
    
    // Отправляем начальную высоту
    setTimeout(sendHeight, 100);
    
    // Следим за resize
    const resizeObserver = new ResizeObserver(sendHeight);
    resizeObserver.observe(textarea);
  </script>
</body>
</html>

7. Альтернатива: auto-height через CSS

Если можно изменить структуру, используй flexbox:

<style>
  body {
    display: flex;
    height: 100vh;
  }
  
  #myFrame {
    flex: 1; /* Займёт всю доступную высоту */
    border: none;
  }
</style>

<iframe id="myFrame" src="child.html"></iframe>

8. Проблемы и их решения

Проблема 1: Бесконечный цикл сообщений

// ПЛОХО: бесконечный цикл
// iframe отправляет сообщение -> родитель меняет высоту
// -> браузер передействует -> iframe отправляет снова

// ХОРОШО: добавляем throttle
let lastHeight = 0;
function sendHeight() {
  const height = textarea.scrollHeight;
  if (height !== lastHeight) {
    lastHeight = height;
    window.parent.postMessage({ type: 'height-changed', height }, '*');
  }
}

Проблема 2: CORS ошибки

// Если iframe с другого домена и нет CORS разрешения
// contentWindow будет недоступен

// Решение: использовать postMessage
window.parent.postMessage({ ... }, 'https://allowed-origin.com');

Проблема 3: Scroll не видна в родителе

// Если textarea имеет scroll, это скроется внутри iframe
// Решение: использовать scrollHeight, чтобы узнать реальную высоту
const realHeight = textarea.scrollHeight; // Высота со всем содержимым

9. Browser support

10. Ключевой вывод

НЕТ, изменения высоты текстового поля в iframe НЕ видны в родителе автоматически.

Решения:

1. postMessage + ResizeObserver (рекомендуется)

   • iframe отправляет сообщение о высоте
   • родитель обновляет height iframe

2. contentWindow.contentDocument (если same-origin)

   • Прямой доступ из родителя
   • Проще, но менее безопасно

3. MutationObserver (для старых браузеров)

   • Наблюдает за изменениями в DOM
   • Работает везде

Безопасность:

• Всегда проверяй event.origin в postMessage
• Используй явный целевой origin вместо '*'
• Не доверяй данным из других origin

Производительность:

• Используй throttle/debounce для частых сообщений
• Отправляй только изменённую высоту
• Используй CSS transitions для плавного изменения