web-dev-qa-db-ja.com

ElectronによってレンダリングされたWebページでJavaScript関数を呼び出す方法は？

Electron （以前のAtom Shell）を使用して Twitter のラッパーを記述しようとしています。

私の_main.js_ファイル（ " Hello World "の例とほとんど同じように見えますが、1つの場所で変更しただけです）：

_var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

// This method will be called when atom-Shell has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {

  // Create the browser window.
  mainWindow = new BrowserWindow ({'width':1000,'height':600});
  // and load the index.html of the app.
  mainWindow.loadUrl('https://Twitter.com');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});
_

alert()の直後にmainWindow.loadUrl()関数を呼び出そうとしましたが、実行されません。

_main.js_ファイルはアプリのサーバー側のようなものですが、問題は...ページでJavaScript関数を呼び出すにはどうすればよいですか？コードはどこに書けばよいですか？

たとえば、私はこれを実行したいと思います：

_$(document).ready(function() {
    alert("Hurray!");
});
_
javascriptnode.jselectron
15
evlogii

私は問題を解決しました。次にコード例を示します。

...

app.on('ready', function() {

  ...

  mainWindow.webContents.on('did-finish-load', function() {
    mainWindow.webContents.executeJavaScript("alert('Hello There!');");
  });

  ...

});
22
evlogii

まず、Electron（以前のAtom Shell）内のプロセスの違いを明確に確認する必要があります。Electronはmain process一種のバックエンド（ "server side"と呼ぶかもしれません）とアプリケーションのエントリポイントとして。メインプロセスはBrowserWindowの複数のインスタンスを生成できます。これらのインスタンスは、実際には別々のオペレーティングシステムウィンドウであり、それぞれがrendererプロセス。レンダラープロセスは、Node.jsモジュールへのアクセスなど、潜在的に拡張された機能を備えた単純なブラウザーウィンドウと考えることができます（「potentially」と書きます。レンダラープロセスのNode.js統合をオフにします）。

レンダラープロセス用のGUIを備えたウィンドウはありますが、メインプロセス用のウィンドウはないことに注意してください。実際、アプリのバックエンドロジック用に1つ持つことはあまり意味がありません。そのため、メインプロセスでalert()を直接呼び出して警告ウィンドウを表示することはできません。あなたが提案したソリューションは確かに警告を示しています。ただし、ポップアップはメインプロセス自体ではなく、レンダラープロセスによって作成されることを理解することが重要です。メインプロセスは、レンダラーにアラートを表示するように要求するだけです（それが_webContents.executeJavaScript_関数が実際に行うことです）。

次に、メインプロセスでalert()関数を呼び出してここで実際に達成しようとしていることを理解しているように、プログラム実行のトレースです。 console.log()を呼び出して、必要なメッセージをコンソールに出力できます。この場合、アプリケーション自体をコンソールから起動する必要があります。

_/path/to/electron-framework/electron /your/app/folder
_

ここでさらに良いのは、メインプロセスをデバッグできることです。そのためには、アプリケーションを_--debug_（または_--debug-brk_）キーとそれに割り当てられた待機ポートの値で開始する必要があります。そのように：

_/path/to/electron-framework/electron --debug=1234 /your/app/folder
_

任意の種類の V8デバッガー を使用して、割り当てられたポートに接続し、デバッグを開始できます。つまり、理論的にはすべてのNode.jsデバッガーが機能する必要があります。 _node-inspector_ または WebStorm debugger を見てください。 StackOverflowには、Node.jsアプリのデバッグに関してよく寄せられる質問があります： Node.jsアプリケーションのデバッグ方法 。

12
Konstantin Grushetsky

properの方法は、contents.send('some_js_Method','parameters')を使用して、Webページのmain.jsからJavaScriptメソッドを呼び出すことです。

// In the main.js
const {app, BrowserWindow} = require('electron')
let win = null

app.on('ready', () => {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(`file://${__dirname}/index.html`)
  win.webContents.send(some_js_Method', 'window created!') //calling js method (async call)
})


//in index.html
<html>
<body>
  <script>
    require('electron').ipcRenderer.on('some_js_Method', (event, message) => {
      console.log(message)  // Prints 'window created!'
    })
  </script>
</body>
</html>
2
JerryGoyal