web-dev-qa-db-ja.com

ElectronでWindowsにデータを渡す

Electronを学び、複数のウィンドウとIPCを使用しています。私のメインスクリプトには、次のものがあります。

var storeWindow = new BrowserWindow({
  width: 400,
  height: 400,
  show: false
});

ipc.on('show-store-edit', function(event, store) {
  console.log(store);
  storeWindow.loadURL('file://' + __dirname + '/app/store.html');
  storeWindow.show();
});

そして、プライマリウィンドウのスクリプトでは、クリックイベントハンドラー内に次のコードがあり、ストアのリストを取得します。

$.getJSON("http://localhost:8080/stores/" + item.id).done(function(store) {
   ipc.send('show-store-edit', store);
});

コンソールで、サーバーからストアデータを印刷しています。私が不明なのは、storeWindow:store.htmlのビューにそのデータを取得する方法です。イベントのシーケンスを正しく処理しているかどうかはわかりませんが、次のようになります。

  • [ストアの編集]をクリックします
  • サーバーからストアデータを取得する
  • 新しいウィンドウを開いてストアデータを表示します

または

  • [ストアの編集]をクリックします
  • 新しいウィンドウを開いてストアデータを表示します
  • サーバーからストアデータを取得する

後者では、storeWindow'sスクリプトからストアを取得するために必要なIDをどのように取得するのかわかりません。

electron
32
Gregg

特定のウィンドウにイベントを送信するには、webContents.send(EVENT_NAME, ARGS)を使用できます（ docsを参照 ）。 webContentsは、ウィンドウインスタンスのプロパティです。

// main process
storeWindow.webContents.send('store-data', store);

送信されるこのイベントをリッスンするには、ウィンドウプロセス（レンダラー）のリスナーが必要です。

// renderer process
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('store-data', function (event,store) {
    console.log(store);
});
51
Michael Radionov

これを実現するにはipcMainモジュールが必要です... APIで述べられているように、「メインプロセスで使用すると、レンダラープロセス（Webページ）から送信される非同期および同期メッセージを処理します。レンダラーから送信されたものは、このモジュールに送信されます。」

ipcMainモジュールのAPIドキュメント：https://electronjs.org/docs/api/ipc-main

IpcMainを使用するには、nodeIntegrationをwebPreferencesで有効にする必要があります

win = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
    }
})

これはセキュリティの問題を引き起こす可能性があることに注意してください。

例：設定（json）ファイルをWebページに渡したいとしましょう

（3つのドット（...）は、ファイル内にすでに配置されているコードを表しますが、この例には関係ありません）

main.js

...

const { readFileSync } = require('fs') // used to read files
const { ipcMain } = require('electron') // used to communicate asynchronously from the main process to renderer processes.
...

// function to read from a json file
function readConfig () {
  const data = readFileSync('./package.json', 'utf8')
  return data
}

...
// this is the event listener that will respond when we will request it in the web page
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg)
  event.returnValue = readConfig()
})
...

index.html

...    
<script>
    <!-- import the module -->
    const { ipcRenderer } = require('electron')

    <!-- here we request our message and the event listener we added before, will respond and because it's JSON file we need to parse it -->
    var config = JSON.parse(ipcRenderer.sendSync('synchronous-message', ''))

    <!-- process our data however we want, in this example we print it on the browser console -->
    console.log(config)

     <!-- since we read our package.json file we can echo our electron app name -->
     console.log(config.name)
</script>

ブラウザのコンソールを表示するには、デフォルトのElectronメニューまたはコードから開発ツールを開く必要があります。 createWindow（）関数内

 win.webContents.openDevTools()
1
user8581607