Компонент FocusableIframe в WordPress предоставляет расширенную версию стандартного элемента iframe, позволяя отслеживать события фокуса. В стандартном iframe сложно обнаружить, когда он становится активным или получает клик внутри. Компонент FocusableIframe решает эту проблему, используя метод, который отслеживает события blur окна и проверяет, направлено ли оно на iframe. Если фокус перемещается в iframe, компонент вызывает эмулированное событие FocusEvent с всплытием, позволяя родительским компонентам обрабатывать это событие.
Применение FocusableIframe
FocusableIframe используется аналогично стандартному iframe, с возможностью передавать дополнительные параметры, включая событие onFocus, которое будет вызвано при получении фокуса. Ниже представлен пример базового использования.
import { FocusableIframe } from '@wordpress/components';
const ExampleFocusableIframe = () => (
<FocusableIframe
src="/example-iframe-url"
onFocus={() => console.log('Iframe focused')}
/>
);
Полное Описание Параметров
FocusableIframe поддерживает следующие параметры, которые передаются внутрь компонента и позволяют настроить его поведение. Также поддерживаются любые стандартные свойства iframe.
1. src
- Тип: Строка
- Обязательный: Да
- Описание: URL, который указывает на содержимое, загружаемое в
iframe.
src="https://example.com/page"
2. onFocus
- Тип: Функция
- Обязательный: Нет
- Описание: Колбэк, который вызывается, когда
iframeполучает фокус. Первый аргумент функции — объектFocusEvent, эмулирующий событие фокуса.
onFocus={(event) => console.log('Iframe focused:', event)}
3. iframeRef
- Тип:
React.Ref - Обязательный: Нет
- Описание: Позволяет получить ссылку на элемент
iframe. Полезно, если вам нужно напрямую взаимодействовать с элементом через DOM.
const iframeReference = React.createRef();
<FocusableIframe
src="https://example.com/page"
iframeRef={iframeReference}
onFocus={() => console.log('Iframe is focused')}
/>
Пример 1: Добавление События onFocus и Использование iframeRef
В этом примере мы создаем компонент FocusableIframe с событием onFocus, которое выводит в консоль сообщение при получении фокуса. Также создается iframeRef для получения ссылки на элемент iframe.
import { useRef } from 'react';
import { FocusableIframe } from '@wordpress/components';
const FocusableIframeExample = () => {
const iframeRef = useRef(null);
const handleFocus = (event) => {
console.log('Iframe получил фокус!', event);
// Дополнительная логика при фокусе, например, изменение состояния или обработка данных
};
return (
<FocusableIframe
src="https://example.com/embedded-content"
onFocus={handleFocus}
iframeRef={iframeRef}
title="Focusable Iframe Example"
width="600"
height="400"
/>
);
};
Пример 2: Интеграция FocusableIframe в Контейнер с Управлением Фокусом
Следующий пример показывает, как компонент FocusableIframe можно использовать внутри родительского компонента с контролем фокуса. Здесь мы создаем FocusableIframe и обрабатываем событие onFocus на родительском элементе.
import { useState } from 'react';
import { FocusableIframe } from '@wordpress/components';
const ContainerWithFocusableIframe = () => {
const [isFocused, setIsFocused] = useState(false);
const handleIframeFocus = () => {
setIsFocused(true);
console.log('Iframe активен');
};
return (
<div>
<h3>Статус фокуса iframe: {isFocused ? 'Активен' : 'Не активен'}</h3>
<FocusableIframe
src="https://example.com/content"
onFocus={handleIframeFocus}
title="Контейнер с FocusableIframe"
width="100%"
height="300"
frameBorder="0"
/>
</div>
);
};
Пример 3: Использование FocusableIframe для Управления Состоянием
В этом примере компонент FocusableIframe используется для изменения состояния isIframeFocused. При фокусировке iframe обновляется состояние и отображается сообщение.
import { useState } from 'react';
import { FocusableIframe } from '@wordpress/components';
const StatefulFocusableIframe = () => {
const [isIframeFocused, setIframeFocus] = useState(false);
return (
<div>
<p>{isIframeFocused ? 'Iframe в фокусе!' : 'Iframe не в фокусе'}</p>
<FocusableIframe
src="https://example.org/iframe-content"
onFocus={() => setIframeFocus(true)}
onBlur={() => setIframeFocus(false)}
width="800"
height="450"
style={{ border: '1px solid #ccc' }}
/>
</div>
);
};
Поддержка Стандартных Свойств iframe
FocusableIframe поддерживает стандартные свойства, такие как title, width, height, и style. Например, можно настроить размеры iframe, добавить стили, установить рамку и определить заголовок:
<FocusableIframe
src="https://example.com/page"
title="Демонстрация FocusableIframe"
width="640"
height="360"
style={{ border: '2px solid #007cba', borderRadius: '5px' }}
/>
Заключение
Компонент FocusableIframe полезен в ситуациях, где требуется обрабатывать фокус внутри iframe. Использование события onFocus, а также свойства iframeRef позволяет легко интегрировать компонент в приложения React и использовать его в рамках системы WordPress.