reactjs - Listen to Webview Events in Electron to enable Keyboard for webview input fields - Stack Overflow

admin管理员组

文章数量:1200995

I am using electron-react-boilerplate as the base of my application. I have a webview inside the app that opens a URL and loads images from that url. There are inputs inside the webview and a keyboard needs to open on that webview for users so that they can enter the search criteria and enter for search. How can i achieve this?

import React, { useEffect, useRef } from 'react';

const CustomWebview = ({ id, src, style }: {id: string, src: string, style: any }) => {
  const webviewRef = useRef<any>(null);

  const injectFocusScript = (webview: any) => {
    if (!webview) return;

    webview.executeJavaScript(`
      (function waitForDocumentReady() {
        if (document && document.readyState === 'complete') {
          if (window.__focusListener) {
            document.removeEventListener('focusin', window.__focusListener);
          }

          window.__focusListener = (e) => {
            if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) {
              window.parent.postMessage({
                type: 'FROM_WEBVIEW',
                payload: {
                  tagName: e.target.tagName,
                  inputType: e.target.type || null,
                  id: e.target.id || null,
                  name: e.target.name || null,
                  classList: [...e.target.classList],
                }
              }, '*');
              console.log("message sent");
              // if (window.electron && window.electron.sendFocusToMain) {
              // console.log(window.electron);
                // window.electron.sendFocusToMain();
                // console.log("focus to main sent");
              // } else {
                // console.log("No window electron");
              // }
            }
          };

          document.addEventListener('focusin', window.__focusListener);
        } else {
          setTimeout(waitForDocumentReady, 100);
        }
      })();
    `).catch((err: any) => console.error('Script injection failed:', err));
  };

  useEffect(() => {
    const webview = webviewRef.current;

    if (!webview) return;

    window.addEventListener('message', (event) => {
      console.log("called" + event);
      if (event.data.type === 'FROM_WEBVIEW') {
        // 'webview-event', event.data.payload
        window.electron.sendFocusToMain();
        console.log("received message");
      }
    });

    const handleDidFinishLoad = () => injectFocusScript(webview);
    const handleDidNavigate = () => injectFocusScript(webview);
    const handleDidFrameFinishLoad = () => injectFocusScript(webview);

    webview.removeEventListener('did-finish-load', handleDidFinishLoad);
    webview.removeEventListener('did-navigate', handleDidNavigate);
    webview.removeEventListener('did-frame-finish-load', handleDidFrameFinishLoad);

    webview.addEventListener('did-finish-load', handleDidFinishLoad);
    webview.addEventListener('did-navigate', handleDidNavigate);
    webview.addEventListener('did-frame-finish-load', handleDidFrameFinishLoad);

    webview.addEventListener('dom-ready', () => {
      if (webview && webview.openDevTools) {
        // webview.openDevTools();
      }
    });

    return () => {
      webview.removeEventListener('did-finish-load', handleDidFinishLoad);
      webview.removeEventListener('did-navigate', handleDidNavigate);
      webview.removeEventListener('did-frame-finish-load', handleDidFrameFinishLoad);
      window.removeEventListener('message', () => {});
    };
  }, []);

  return (
    <webview
      ref={webviewRef}
      src={src}
      id={id}
      style={style}
      nodeintegration="false"
      webpreferences="contextIsolation=true"
    />
  );
};

export default CustomWebview;

this is the customWebView i wrote but nothing i try is allowing me to listen to the input or textarea focus?

Please guide me if i can listen to the input focus or any other way to achieve this?

I tried listening to the events inside the webview that can trigger the keyboard in the renderer but that is not working.

本文标签： reactjsListen to Webview Events in Electron to enable Keyboard for webview input fieldsStack Overflow