Question

加载初始BrowserWindow时，我试图将注意力集中在Electron中的控件上。

我知道可以通过jQuery，JavaScript等实现此目的的其他方法，但是Electron框架提供了一些特定的功能吗？

我尝试使用jQuery / JavaScript集中控制，但似乎在Electron中不起作用。

这是我的代码，用于在条目JS文件app.js中设置Electron：-

const electron = require('electron');
const path = require('path');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
nativeImage.createFromPath(path.join(__dirname,"demo.png"))
app.on('ready', () => {
    window = new BrowserWindow({
        width: 650,
        height: 120,
        transparent:true,
        frame: false,
    });
    window.loadURL(`file://${__dirname}/Wepage.html`);
});

这是我的html：

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#googleFrame').focus();
        });

    </script>
    <style>
        body {
            width: 300px;
            height:100px;
            margin: 0px;
            padding: 0px;
            overflow-x: hidden;
            /* overflow-y: hidden; */
        }

        iframe {
            position: relative;
            overflow: hidden;
        }

        body {
            background: transparent;
            background: rgba(255, 255, 255, 0.1);
        }

        iframe {
            top: 450px;
            border: 20px solid black;
            opacity: 0.1;
        }

        .draggable-area {
            -webkit-app-region: drag;
        }
    </style>
  </head>

  <body class="draggable-area">
    <center class="draggable-area">
      <iframe frameborder="0" scrolling="no" seamless="seamless"
                    src="https://www.google.com"
                    width="600" height="60"
                    id="googleFrame"></iframe>
    </center>      
  </body>
</html>

Answer 1

ElectronJ的“视图”没有什么特别的，只是普通的html，css和javascript。

您确定代码完全在执行吗？关闭body标签后放上它有点奇怪。

您是否尝试将重点放在其他内容上，例如制作按钮元素并尝试将重点放在此上？

Answer 2

您可以使用自动对焦

<iframe frameborder="0" scrolling="no" seamless="seamless"
                    src="https://www.google.com"
                    width="600" height="60"
                    id="googleFrame" autofocus ></iframe>

Answer 3

如果在打开开发工具的情况下看到此消息，请加载应用程序，而不会自动加载开发工具，并且焦点功能可以正常工作。即从main.js注释掉for i, col in enumerate(df.columns): df[col] = df[col].apply(lambda x: chr(ord('A')+i) + str(int(x)) if not pd.isna(x) else x)。

我有一个类似的问题-使用我的电子应用程序中的win.openDevTools();属性或javascript autofocus加载页面时，输入元素没有被聚焦。电子GitHub上也报道了类似的问题：特别是#2317，#1773，#5900。

我发现只有从main.js自动打开开发工具时，该问题才明显：我相关的main.js代码非常原始：

element.focus()

注释function createWindow () { // Create the browser window. let win = new BrowserWindow({ ... webPreferences: { nodeIntegration: true, devTools: true } }) win.openDevTools(); win.loadFile('myPage.html'); ... }，然后focus（）功能正常工作。

如何在电子框架中将焦点放在html控件上？

3 个答案: