Comment appeler une fonction JavaScript sur une page web rendue par Electron?

Je suis en train d'écrire un wrapper pour Twitter à l'aide de D'électrons (anciennement Atome Shell).

Mon main.js fichier (elle est presque identique à la "Bonjour Tout Le Monde", par exemple, je viens de changer cela en un seul endroit):

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;
  });
});

J'essaie d'appeler alert() fonction juste après mainWindow.loadUrl() mais il ne les exécute pas.

Je comprends que main.js fichier, c'est comme le côté serveur de mon application, mais la question est... Comment puis-je appeler une fonction JavaScript sur la page? Où dois-je écrire le code?

Par exemple, je veux faire:

$(document).ready(function() {
    alert("Hurray!");
});

source d'informationauteur evlogii

J'ai résolu le problème. Voici l'exemple de code:

...

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

  ...

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

  ...

});

11

Tout d'abord, vous devez voir clairement la différenciation des processus au sein de l'Électron (anciennement Atome Shell). Electron rend l'utilisation de la processus principal comme une sorte de back-end (on peut l'appeler "côté serveur" comme vous le faites) et un point d'entrée de votre application. Comme vous l'avez probablement comprendre les principaux processus peut engendrer de multiples instances de BrowserWindowqui sont en fait de séparer le système d'exploitation windows chaque hébergement d'un Chrome rendu de la page web s'exécutent dans un processus distinct, appelé convertisseur processus. Vous pouvez penser de moteur de rendu processus comme une simple fenêtre de navigateur potentiellement avec des fonctionnalités étendues, comme un accès à Node.js les modules (j'écris "potentiellement", parce que vous pouvez désactiver Node.js l'intégration de convertisseur de processus).

Il convient de mentionner que si vous avez une fenêtre avec une interface graphique pour le rendu processus, vous n'en avez pas pour le processus principal. En fait, il ne fait pas beaucoup de sens d'avoir un pour le back-end de la logique de votre application. Donc, il n'est pas possible d'appeler alert() directement dans le processus principal et voir la fenêtre d'alerte. La solution que vous avez proposée montre l'alerte, en effet. Mais il est important de comprendre que le pop up est créé par le moteur de rendu processus et non pas le processus lui-même! Les principaux processus de demande juste le moteur de rendu pour afficher l'alerte (c'est ce que webContents.executeJavaScript fonction n').

Deuxièmement, ce que je comprends de ce que vous êtes vraiment essayer de réaliser ici avec l'appel de alert() fonction dans le processus principal est le suivi de l'exécution du programme. Vous pouvez appeler console.log() à la sortie le message de votre choix sur la console. Dans ce cas, la demande doit être démarré à partir de la console:
```
/path/to/electron-framework/electron /your/app/folder
```
Maintenant, ce qui est encore mieux est que vous pouvez déboguer le processus principal. Afin de faire la demande doit être démarré avec la --debug (ou --debug-brk) de la clé et de la valeur de l'écoute d'un port affecté. Juste comme ça:
```
/path/to/electron-framework/electron --debug=1234 /your/app/folder
```
Vous pouvez utiliser n'importe quel type de V8 débogueur à joindre au port affecté et démarrer le débogage. Cela signifie que, théoriquement, tout Node.js débogueur doit travailler. Jetez un oeil à node-inspector ou WebStorm débogueur. Il y a une question populaire ici à StackOverflow sur le débogage Node.js applications: Comment puis-je debug Node.js les applications?.

La bon façon est d'utiliser des contents.send('some_js_Method','parameters') pour appeler une méthode javascript dans une page web à partir de main.js

//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>

Vous devez vous connecter pour publier un commentaire.