Wie ruft man eine JavaScript-Funktion auf einer von Electron gerenderten Webseite auf?

Question

Ich versuche, einen Wrapper für Twitter mit Electron (früher Atom Shell) zu schreiben.

Meine main.js Datei (es sieht aus auf das „Hello World“ Beispiel fast identisch, ich habe es an einem Ort gerade geändert):

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

Ich versuche alert() Funktion direkt nach mainWindow.loadUrl() zu nennen, aber es wird nicht ausgeführt.

Ich verstehe, dass main.js Datei ist wie die Server-Seite meiner App, aber die Frage ist ... Wie kann ich eine JavaScript-Funktion auf Seite aufrufen? Wo soll ich den Code schreiben?

Zum Beispiel möchte ich dies auszuführen:

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

Answer 1

ich das Problem gelöst haben. Hier ist der Beispielcode:

... 

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

    ... 

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

    ... 

}); 

Answer 2

Zunächst einmal sollten Sie klar die Differenzierung von Prozessen innerhalb Electron sehen (vormals Atom Shell). Electron verwendet den Hauptprozess als eine Art Back-End (Sie könnten es "Serverseite" nennen wie Sie) und einen Einstiegspunkt Ihrer Anwendung. Wie Sie wahrscheinlich verstehen, kann der Hauptprozess mehrere Instanzen von BrowserWindow spawnen, die eigentlich separate Betriebssystemfenster sind, die jeweils eine Chromium-gerenderte Webseite in einem separaten Prozess namens Renderer-Prozess hosten. Sie können sich den Renderer-Prozess als ein einfaches Browser-Fenster mit möglicherweise erweiterten Funktionen vorstellen, z. B. beim Zugriff auf Node.js-Module (ich schreibe "potenziell", weil Sie die Node.js-Integration für den Renderer-Prozess deaktivieren können).

Es sollte erwähnt werden, dass, während Sie ein Fenster mit GUI für Renderer-Prozess haben, Sie keine für den Hauptprozess haben. In der Tat macht es wenig Sinn, einen für die Backend-Logik Ihrer App zu haben. Es ist also nicht möglich, alert() direkt im Hauptprozess aufzurufen und das Alarmfenster zu sehen. Die von Ihnen vorgeschlagene Lösung zeigt den Alert tatsächlich. Aber es ist wichtig zu verstehen, dass das Popup vom Renderer-Prozess und nicht vom Hauptprozess selbst erstellt wird! Der Hauptprozess fordert den Renderer lediglich auf, die Warnung anzuzeigen (das ist die Funktion webContents.executeJavaScript).

Zweitens, wie ich verstehe, was Sie hier mit dem Aufruf alert() Funktion im Hauptprozess erreichen wollen, ist die Verfolgung der Programmausführung. Sie können console.log() aufrufen, um die gewünschte Nachricht an die Konsole auszugeben. In diesem Fall wird die Anwendung selbst muss von der Konsole gestartet werden:

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

Nun, was noch besser ist, dass Sie den Hauptprozess debuggen können. Dazu muss die Anwendung mit dem Schlüssel --debug (oder --debug-brk) und dem ihm zugewiesenen Wert des Listening-Ports gestartet werden. Genau wie die:

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

können Sie jede Art von V8 debugger verwenden, um den zugeordneten Port zu befestigen und das Debuggen starten. Das bedeutet, dass theoretisch jeder Node.js-Debugger funktionieren muss. Werfen Sie einen Blick auf node-inspector oder WebStorm debugger.Bei StackOverflow gibt es eine beliebte Frage zum Debuggen von Node.js-Apps: How do I debug Node.js applications?.

Answer 3

Die richtige Weg ist contents.send('some_js_Method','parameters') zu verwenden, um eine Javascript-Methode in einer Web-Seite von 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>