可聚焦的iframe

已弃用

<FocusableIframe /> 是一个渲染 iframe 元素的组件，经过增强以支持焦点事件。默认情况下，无法检测 iframe 何时获得焦点或在其内部被点击。此增强组件使用一种技术来检查窗口 blur 事件的目标是否为该 iframe，从而推断出 iframe 已获得焦点。它会在 iframe 元素上分发一个带有事件冒泡的模拟 FocusEvent，因此绑定自身 onFocus 事件的父组件将能够处理在 iframe 内部的焦点过渡。

用法

像使用标准 iframe 一样使用它。您可以直接将 onFocus 作为回调传递，以便在 iframe 获得焦点时调用；或者由于事件会冒泡，也可以在上游组件中捕获该事件。

import { FocusableIframe } from '@wordpress/components';

const MyFocusableIframe = () => (
    <FocusableIframe
        src="/my-iframe-url"
        onFocus={ () => console.log( 'iframe is focused' ) }
    />
);

属性

除下列列出的属性外，其他所有传递给 FocusableIframe 的属性都将透传到底层的 iframe 元素。

onFocus

• 类型：Function
• 必填：否

当 iframe 获得焦点时调用的回调函数。它将模拟的 FocusEvent 对象作为第一个参数传递。

iframeRef

• 类型：React.Ref
• 必填：否

如果需要底层 DOM 元素的引用，请将从组件中调用的 React.createRef 的结果作为 iframeRef 传递。