5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ElectronのメニューからJavaScript呼び出し

Posted at

以下のリポジトリに対して、作業します。

git clone https://github.com/atom/electron-quick-start

index.htmlにJavaScriptのtestFunc関数を定義します。
関数はグローバルに定義されている必要があります。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script>
    var testFunc = function(){
      alert("Hello");
    }
    </script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

main.jsの冒頭にconst Menu = electron.Menu;を追記し、
app.on('ready', function() {の下に以下の処理を追加。

main.js
var template = [
  {
    label: 'Test',
    submenu: [
      {
        label: 'TestFunc',
        accelerator: 'CmdOrCtrl+S',
        click: function(item, focusedWindow) {
          if (focusedWindow)
            focusedWindow.webContents.executeJavaScript('testFunc()');
        }
      }
    ]
  }
]
var menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

実行結果

メニューに「TestFunc」が表示されます。

スクリーンショット 2016-01-03 4.09.16.png

JavaScriptのtestFunc関数が実行され、"Hello"とalertされます。

スクリーンショット 2016-01-03 4.09.40.png

参考サイト

http://electron.atom.io/docs/v0.36.0/api/menu/
http://electron.atom.io/docs/v0.27.0/api/browser-window/#webcontents-executejavascript-code

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?