如何在React中将按键事件发送/调度到嵌入式iframe? [英] How to send/dispatch keypress events to an embedded iframe in React?

问题描述

我有一个嵌入在网络应用程序中的Google幻灯片iframe.
iframe的实现是:

I have an iframe of Google Slides which I embedded in my web app.
The iframe implementation is:

<iframe ref={slidesRef} src={src} width='100%' height='100%' allowFullScreen={true}/>

我想听主页上的单击事件(虽然iframe不一定是焦点)，然后创建它们相应的按键事件-并将它们传递给iframe，从而使幻灯片iframe能够触发并做出反应用户按键按下.

I want to listen to click events on the main web page (while the iframe is not necessarily in focus), then create their corresponding keypress events - and pass them to the iframe, thus making the slideshow iframe to trigger and react to the user key presses.

我尝试过这样的事情:

    function onButtonClick(e) {
        e.stopPropagation();
        slidesRef.current.focus();
        slidesRef.current.dispatchEvent(new KeyboardEvent('keypress', {
            key: 'ArrowRight', which : 39
        }));
    }

但是它不起作用-它仅关注iframe，但不发送箭头键事件.
我看到了一些在iframe中使用父文档或使用postMessage发送消息的解决方案，但是由于其来源是外部链接，所以无法在iframe中添加任何代码.

But it doesn't work - it only focuses on the iframe, but doesn't send the arrow key event.
I saw some solutions using the parent document inside the iframe or sending messages with postMessage, but I can't add any code inside my iframe since its origin is an external link.

推荐答案

由于

Due to restrictions imposed by the Same Origin Policy implemented by all modern browsers, I don't think you'll be able to do what you intend to do - this is not related to React, the browser will just not allow for a script on the parent window to trigger any kind DOM event on the child iframe programmatically.

这就是为什么在搜索解决方案时会看到对postMessage API的引用的原因.引入该API是为了以更安全，更可控制的方式实现窗口对象之间的跨域通信.

That's why you saw references to the postMessage API when you searched for a solution. That API was introduced to enable cross-origin communication between window objects in a safer, more controlled manner.

您发布的代码将执行任何可能附加到父窗口的DOM iframe元素的事件侦听器，因此如下所示:

The code you've posted would execute any event listener that might appended to the parent window's DOM iframe element, so something like this:

<iframe onkeydown="console.log('keydow')" src="https://google/..." />

应该由您的代码触发.但这是在父窗口上发生的，JavaScript运行"是在父窗口上进行的. iframe中的内容(即负责更改当前幻灯片的Google代码)无权访问，也无法看到"该事件.

Should be triggered by your code. But this is happening on the parent window, the javascript "running" within iframe (i.e. Google's code responsible for changing the current slide) doesn't have access nor is able to "see" that event.

如果iframe和您的网页都来自同一域 (换句话说，如果它们具有相同的来源")，我认为您试图达到的目标将是:

If both the iframe and your webpage were serviced from the same domain (in other words, if they had the same "origin"), what I think you're trying to achieve would be something more in the lines of:

function onButtonClick(e) {
  e.stopPropagation()

  // Note that we're retrieving a DOM element from the iframe's window object,
  // not the parent's one
  const iframeBody = slidesRef.current.contentDocument.body;

  // Get an element on the iframe's document which has an event listener attached
  // to it that changes the current slide
  const sliderEl = iframeBody.querySelector('...')
  sliderEl.click()
}

但是同样，这仅在iframe和parent窗口都被认为具有相同来源"的情况下才有效.通过浏览器(不是您的情况).

But again this'd only work if both the iframe and parent window were considered to have the "same origin" by the browser (which isn't your case).

这篇关于如何在React中将按键事件发送/调度到嵌入式iframe?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！