search
LoginSignup
47

More than 5 years have passed since last update.

posted at

updated at

Electronのpreload、executeJavaScriptや、各種イベントの発生順序を調べてみた

Electronにはウィンドウオープン時のpreloadオプションとかexecuteJavaScript関数とかの、Javascriptを埋め込んで実行する便利機能がありますが、他のイベントと併せてこいつらはどういう順番で実行されるの? と混乱してきたので実験してみました。

テストプログラム

  • main.jsからindex.htmlを開く
  • index.htmlのpreloadオプションにpreload_index.jsを指定
  • index.html内にwebviewタグでwebview.htmlを読み込む
  • webview.htmlのpreloadにpreload_webview.jsを指定

イベントが発生したら、ipcでメインプロセスにメッセージを送信し、それを表示しています。
イベントの発生順にconsole.logにメッセージが表示されるはずです。

main.js
'use strict';
const {app, BrowserWindow, ipcMain} = require('electron');
const path = require('path');

let mainWindow = null;
app.on('window-all-closed', ()=>app.quit());

let webContentJs = `
let ipcRender = require('electron').ipcRenderer;
ipcRender.send('ipc', 'WebContents.executeJavaScriptで実行されたJavascript');`;

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        webPreferences: {
            preload: path.resolve(path.join(__dirname, 'preload_index.js')),
        },
    });
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    mainWindow.webContents.executeJavaScript(webContentJs);
    mainWindow.webContents.on('did-finish-load', ()=> console.log('WebContents.did-finish-loadイベント'));
    mainWindow.webContents.on('did-start-loading', ()=> console.log('WebContents.did-start-loadingイベント'));
    mainWindow.webContents.on('dom-ready', ()=> console.log('WebContents.dom-readyイベント'));

    ipcMain.on('ipc', (event, arg)=> console.log(arg));

    mainWindow.on('closed', ()=> mainWindow = null);
    mainWindow.webContents.openDevTools({mode:'undocked'});
});
index.html
<!DOCTYPE html>
<!-- メインウィンドウ-->
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <script>
            const {ipcRenderer} = require('electron');
            ipcRenderer.send('ipc', 'index.html内の<script>タグ');
            window.addEventListener('load', function() {
                ipcRenderer.send('ipc', 'index.htmlのwindow.onload');
            });
        </script>
    </head>
    <body>
        てすと<br>
        <webview class="wv" src="webview.html" preload="./preload_webview.js"></webview>
    </body>
</html>
preload_index.js
//" a script that will be loaded before other scripts run in the page."
const {ipcRenderer} = require('electron');
window.addEventListener('load', ()=> ipcRenderer.send('ipc', 'index.htmlのpreloadのwindow.onload'));
ipcRenderer.send('ipc', 'index.htmlのpreload');
webview.html
<!DOCTYPE html>
<!--index.html内に読み込まれるwebview-->
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>webview</title>
</head>
<body>
    webview<br>
</body>
</html>
preload_webview.js
const {ipcRenderer} = require('electron');
window.addEventListener('load', ()=> ipcRenderer.send('ipc', 'webview.htmlのpreloadのwindow.onload'));
ipcRenderer.send('ipc', 'webview.htmlのpreload');

実行結果

こんな感じになりました。

index.htmlのpreload
index.html内の<script>タグ
WebContents.dom-readyイベント
index.htmlのpreloadのwindow.onload
index.htmlのwindow.onload
WebContents.did-finish-loadイベント
WebContents.executeJavaScriptで実行されたJavascript
webview.htmlのpreload
webview.htmlのpreloadのwindow.onload

WebContents.did-start-loadingは発生しないんですね。
リロードしてみました。

WebContents.did-start-loadingイベント
index.htmlのpreload
index.html内の<script>タグ
WebContents.dom-readyイベント
index.htmlのpreloadのwindow.onload
index.htmlのwindow.onload
WebContents.did-finish-loadイベント
webview.htmlのpreload
webview.htmlのpreloadのwindow.onload

webviewのpreloadは、WebContents.did-finish-loadingより先に実行されるかと思っていました。
しかもリロード時は、executeJavascriptは実行されないんですね。

実験してみるものですね。

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
What you can do with signing up
47