Встречается на собеседованиях • сегодня

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

Изменения высоты текстового поля внутри iframe не видны родительскому документу автоматически. Для синхронизации высот нужно использовать postMessage API:

javascript
// Внутри iframe:
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
  const height = textarea.scrollHeight;
  window.parent.postMessage({ type: 'resize', height }, '*');
});

// В родительском документе:
window.addEventListener('message', (e) => {
if (e.data.type === 'resize') {
const iframe = document.querySelector('iframe');
iframe.style.height = ${e.data.height}px;
}
});

text

Важные нюансы:
1. Домены iframe и родителя должны быть согласованы (или использовать '*' для любых доменов)
2. Для безопасности лучше проверять `event.origin`
3. Событие `input` срабатывает при любом изменении текста
Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы