单击按钮但不打开窗口或链接Electron

时间:2019-08-14 10:40:39

标签: javascript html electron

我正在编写一个程序来监控蒸汽市场的价格,并在电子环境中构建UI,问题是当我单击按钮时,它没有注册。

我尝试将其记录到控制台或发送到新窗口或打开链接,但无法正常工作。我也厌倦了使用.on('click',....

index.js:

const {BrowserWindow} = require('electron').remote
const path = require('path')
const {shell} = require('electron')
const launchbtn = document.getElementById('launch')

launchbtn.addEventListener('click', (event) => {
  const modalPath = path.join('file://', __dirname, 'launch.html')
  let win = new BrowserWindow({ width: 400, height: 320 })
  //shell.openExternal('http://electron.atom.io') tried but didnt work
  win.on('close', () => { win = null })
  win.loadURL(modalPath)
  win.show()
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="../assets/css/main.css">
  </head>
  <body>
    
    <div class="row">
      <div id="price-container">
        <p class="subtext">Market-Monitor</p>
        <h1 id="About">By SourcE</h1>
      </div>
      <div id="goal-container">
        <p><span id="targetPrice">Monitor Prices of items</span></p>
      </div>
      <div id="right-container">
        <button id="launch">Launch</button>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

launch.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="../assets/css/main.css">
  </head>
  <body>
    
    <div class="row">
      <div id="price-container">
        <p class="subtext">test</p>
        <h1 id="About">test</h1>
      </div>
      <div id="goal-container">
        <p><span id="targetPrice">test</span></p>
      </div>
      <div id="right-container">
        <button id="launch">test</button>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

如果该按钮起作用,则应打开窗口的新实例,并将文本更改为text。

感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <link rel="stylesheet" href="../assets/css/main.css">
      </head>
      <body>
        
        <div class="row">
          <div id="price-container">
            <p class="subtext">test</p>
            <h1 id="About">test</h1>
          </div>
          <div id="goal-container">
            <p><span id="targetPrice">test</span></p>
          </div>
          <div id="right-container">
<form name="form-name" action="launch.php">
            <input type="submit" name="submit" value="Button Name">
</form>
          </div>
        </div>

        <script src="index.js"></script>
      </body>
    </html>

新文件将其命名为launch.php

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
        <link rel="stylesheet" href="../assets/css/main.css">
      </head>
      <body>
        
        <div class="row">
          <div id="price-container">
            <p class="subtext">test</p>
            <h1 id="About">test</h1>
          </div>
          <div id="goal-container">
            <p><span id="targetPrice">test</span></p>
          </div>
          <div id="right-container">
<form name="form-name" action="launch.php">
            <input type="submit" name="submit" value="Button Name">
</form>
          </div>
        </div>

        <script src="index.js"></script>
      </body>
    </html>

答案 1 :(得分:1)

您可以通过Java脚本轻松打开新窗口。您可以在下面看到代码。您只需要快速查询。

<button class="btn btn-success" onclick="location.href='http://google.com';"> Google</button>

答案 2 :(得分:0)

用php和表格来做。该表格应具有php文件的作用,并且在php文件中,如果他单击了“提交”,您将进行查询,然后进行标题位置的操作:索引......等等。