Question

我想在reactjs中侦听iframe的keydown事件。在我的iframe中我嵌入了视频。现在，当视频正在播放时，我想处理键盘事件。任何人都可以帮我如何听键盘事件。这是我的代码

class VideoDetail extends Component {

videoLoad(e) {
    console.log('videoLoaded');
    this.videoFrame.addEventListener('keydown',this.onVideoDown);
}

onVideoDown(e) {
    console.log('key pressed'); // This is not invoking
}

componentDidMount() {
    console.log(this.videoFrame);
}
render() {
    const video = this.props.video;
    if (!video) {
        return <div>Loading...</div>;
    }

    const videoId = video.id.videoId;
    const url = `https://www.youtube.com/embed/${videoId}`;
    return (
        <div className="video-detail col-md-8">
            <div className="embed-responsive embed-responsive-16by9">
                <iframe ref={(iframe) => { this.videoFrame = iframe; console.log(iframe); }} className="embed-responsive-item" src={url} onLoad={(e) => this.videoLoad(e)}></iframe>
            </div>
            <div className="details">
                <div>{video.snippet.title}</div>
                <div>{video.snippet.description}</div>
            </div>
        </div>
    );
}

}

Answer 1

您可以使用(?=(?:....)+$)或keydown与iframe.contentWindow.document一起使用e.target来抓取if this.videoFrame事件。

修改后的代码

ref

如何使用ReactJS监听iframe keydown事件

1 个答案: