Компонент SandBox из библиотеки @wordpress/components предоставляет изолированную среду для отображения HTML-кода в WordPress с использованием iframe. Это полезно для безопасного встраивания HTML-контента, который не должен конфликтовать с основными стилями и скриптами сайта.
Компонент SandBox позволяет:
- Встраивать HTML-код в отдельный
iframe. - Управлять стилями и скриптами внутри
iframe. - Задавать название и класс для
iframe.
Основное использование SandBox
Ниже приведен простой пример использования SandBox для отображения HTML-контента:
import { SandBox } from '@wordpress/components';
const MySandBox = () => (
<SandBox
html="<p>Здесь будет изолированное содержимое.</p>"
title="Мой песочница"
type="embed"
/>
);
В этом примере создается компонент Sandbox, в который передается HTML-контент, который будет отображаться внутри iframe. Также задаются атрибуты title и type.
Пример использования с кастомными стилями и скриптами
В этом примере добавляются стили и скрипты для iframe, что позволяет более гибко контролировать отображение контента внутри изолированной среды:
import { SandBox } from '@wordpress/components';
const MyCustomSandbox = () => (
<SandBox
html="<div><h1>Привет, мир!</h1><p>Это контент внутри песочницы.</p></div>"
title="Песочница с кастомными стилями"
type="embed"
scripts={["https://example.com/script.js"]}
styles={["body { background-color: #f0f0f0; }"]}
/>
);
Здесь используется массив scripts, чтобы добавить внешние JavaScript-файлы, и массив styles, чтобы внедрить CSS в контекст iframe. Эти параметры обеспечивают дополнительные возможности для кастомизации.
Описание параметров (Props)
Давайте подробнее рассмотрим все параметры компонента Sandbox и их назначение.
- html: string
Содержимое HTML, которое будет отображаться в теле документа внутри iframe. Это основной параметр для передачи HTML-кода.
Обязательный: Нет.
По умолчанию: Пустая строка ("").
Пример:<p>Контент внутри iframe</p>. - onFocus: React.DOMAttributes<HTMLIFrameElement>[‘onFocus’]
Колбэк для обработки события фокуса на iframe. Вызывается, когда iframe получает фокус.
Обязательный: Нет.
Пример:onFocus={() => console.log("Iframe is focused")} - scripts: string[]
Массив URL-адресов скриптов, которые будут внедрены как теги<script>в конец<body>документа iframe. Это позволяет добавить сторонние скрипты или кастомный JavaScript.
Обязательный: Нет.
По умолчанию: Пустой массив ([]).
Пример:scripts={["https://example.com/my-script.js", "https://example.com/another-script.js"]} - styles: string[]
Массив строк с CSS-стилями, которые будут внедрены в<head>документа iframe. Это позволяет добавить стили в контекст iframe, не влияя на основной документ.
Обязательный: Нет.
По умолчанию: Пустой массив ([]).
Пример:styles={["body { background-color: #ff0000; }", "h1 { font-size: 24px; }"]} - title: string
Атрибут<title>для документа внутри iframe. Это название будет отображаться в заголовке iframe.
Обязательный: Нет.
По умолчанию: Пустая строка ("").
Пример:title="Изолированный контент" - type: string
CSS-класс, который будет применен к элементам<html>и<body>внутри iframe. Используется для задания стилей и классов, специфичных для содержимого iframe.
Обязательный: Нет.
По умолчанию: Пустая строка ("").
Пример:type="embed" - tabIndex: HTMLElement[‘tabIndex’]
АтрибутtabIndex, который определяет порядок фокуса для iframe. Это полезно для управления доступностью и навигацией с помощью клавиатуры.
Обязательный: Нет.
Пример:tabIndex={0}
Пример с полным набором параметров
В этом примере показано использование всех параметров компонента Sandbox:
import { SandBox } from '@wordpress/components';
const FullSandboxExample = () => (
<SandBox
html="<div><h2>Заголовок</h2><p>Контент в iframe с кастомными стилями и скриптами.</p></div>"
title="Полный пример песочницы"
type="embed"
scripts={["https://example.com/external-script.js"]}
styles={["body { color: blue; }"]}
onFocus={() => console.log("Iframe focused")}
tabIndex={1}
/>
);
Заключение
Компонент Sandbox — это мощный инструмент для создания изолированных окружений в WordPress с помощью iframe. Он позволяет вам встраивать HTML-контент и добавлять кастомные стили и скрипты без влияния на основную страницу. Это особенно полезно для безопасного отображения внешнего контента или интеграции пользовательских компонентов в изолированном пространстве.