More than 5 years have passed since last update.

Electron 7.0.1でwebviewが動かない/表示されない

Last updated at 2019-11-05Posted at 2019-11-02

最初に

これに1時間近くはまってました。。辛かった。。今後のためにも残しておきたいと思いとりあえずQiitaに残しておきます。
*Qiita初投稿でおまけにマークダウンスタイルで書くのにも慣れてないのでなんか変なところがあるかもです。ご了承ください。

問題

htmlを以下のように、

  <!DOCTYPE html>
    <html>
        <head>
            <title>Hello World!</title>
        </head>
        <body>
            <webview src="https://google.com/" autosize="on" minwidth="576" minheight="432"></webview>
        </body>
    </html>

tsを以下のように

///<reference path="./typings/index.d.ts"/>

// In the main process.
const { app, BrowserWindow } = require('electron')
const path = require('path');

const url = "" + __dirname + "/main.html"

app.on('window-all-closed', () => {
    app.quit()
})

app.on('ready', () => {
    let win = new BrowserWindow({ width: 800, height: 600 })
    // load a page
    win.loadURL(url)
    console.log(app.getAppPath())
})

書いたところ何にもレンダリングされない。

解決法

参照: https://github.com/electron/electron/blob/master/docs/api/breaking-changes.md#new-browserwindow-webpreferences-
BrowserWindow内にwebview有効化ということを明記する

  let win = new BrowserWindow({
    width: 1000,
    height: 800,
    'webPreferences': {
    	'webviewTag': true
    }

みたいな感じにしてあげたらok

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up