title: How can I set focus on an html control in electron framework?
body: <p>I am trying to set focus on a control in Electron when the <strong>initial BrowserWindow loads.</strong></p>
  
  <p>I know there are alternative ways to do this through jQuery, JavaScript, etc, but is there something specific provided by the Electron framework?</p>
  
  <p>I tried to focus the control using jQuery/JavaScript, but they do not seem to work in Electron.</p>
  
  <p>Here is my code to set up Electron in the entry JS file app.js :-</p>
  
  <pre><code>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', () =&gt; {
      window = new BrowserWindow({
          width: 650,
          height: 120,
          transparent:true,
          frame: false,
      });
      window.loadURL(`file://${__dirname}/Wepage.html`);
  });
  </code></pre>
  
  <p>And here is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html
       PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $('#googleFrame').focus();
          });
  
      &lt;/script&gt;
      &lt;style&gt;
          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;
          }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body class="draggable-area"&gt;
      &lt;center class="draggable-area"&gt;
        &lt;iframe frameborder="0" scrolling="no" seamless="seamless"
                      src="https://www.google.com"
                      width="600" height="60"
                      id="googleFrame"&gt;&lt;/iframe&gt;
      &lt;/center&gt;      
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>