@saku-11posted at 2022-02-10

Electronのwebviewにてtwitter、google翻訳等の特定のサイトが開けない

Q&A

Closed

Electronのwebviewでtwitterなどの特定のサイトが開けない

開発環境　node.js(v17.0.1)　Electron(v16.0.7)
Electronで簡単なブラウザーを開発しているとgoogle翻訳、twitter等の一部のウェブサイトを開いたときに、なぜかElectronのwebview内がフリーズし、その状態で他のurlを開こうとするとElectronのwindow自体が閉じてしまい、エラーログが出力されます。
そのような特定のサイトに何か共通点があるのかは分かりません。
どうすれば開けるようになるでしょうか...

発生している問題・エラー

webviewがフリーズしている状態でurlを開いたときに出力されるエラー

[23540:0210/184628.467:ERROR:gpu_init.cc(457)] Passthrough is not supported, GL is disabled, ANGLE is

該当するソースコード

index.js

const Electron = require('electron')
const path = require('path');
var BrowserWindow = Electron.BrowserWindow;
const url = "" + __dirname + "/index.html"

Electron.app.on('window-all-closed', () => {
    Electron.app.quit()
    Electron.session.defaultSession.clearCache();
})

Electron.app.on('ready', () => {
    let win = new BrowserWindow({
        width: 1000,
        height: 800,
        'webPreferences': {
            'webviewTag': true
        },

    })
    win.openDevTools();
    win.setMenu(null);
    win.loadURL(url)
    console.log(Electron.app.getAppPath())
})

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ブラウザー</title>
    <meta name="description" content="">
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>
    <div id="menu" style="height:4vh;width:95vw;"><button id='back' style="height:3vh;width:3vh;"><span id='backtext'>↩</span></button><button id='forward' style="height:3vh;width:3vh;"><span id='forwardtext'>↪</span></button><button id='reload' style="height:3vh;width:3vh;">↻</button>
        <input type='text' id='searchtext' style='width:60vw;height:3vh;'><button id='search' style="height:3vh;width:6vh;">検索</button><span id='message'></span><button id='dev'>dev</button>
    </div>
    <webview src="https://www.google.com/ " style="display: flex; width: 100vw; height: 91vh; border: none; " id='webview'></webview>

    <script type="text/javascript">
        var mode = 1
        document.getElementById('back').onclick = function() {
            document.getElementById('webview').goBack()
        }
        document.getElementById('forward').onclick = function() {
            document.getElementById('webview').goForward()
        }
        document.getElementById('reload').onclick = function() {
            document.getElementById('webview').reload()
        }
        document.getElementById('dev').onclick = function() {
            document.getElementById('webview').openDevTools()
        }
        document.getElementById('menu').addEventListener('keypress', function(e) {
            if (e.keyCode === 13) {
                var text = document.getElementById('searchtext')
                if (text.value.match(/^https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+/g) || text.value.match(/^http?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+/g)) {
                    document.getElementById('webview').src = text.value
                } else if (text.value.match(/^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/) || text.value.match(/^([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/)) {
                    document.getElementById('webview').src = "http://" + text.value
                } else {
                    document.getElementById('webview').src = `https://www.google.com/search?q=${text.value}`
                }
            }
        });
        document.getElementById('search').onclick = function() {
            var text = document.getElementById('searchtext')
            if (text.value.match(/^https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+/g) || text.value.match(/^http?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+/g)) {
                document.getElementById('webview').src = text.value
            } else if (text.value.match(/^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/) || text.value.match(/^([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/)) {
                document.getElementById('webview').src = "http://" + text.value
            } else {
                document.getElementById('webview').src = `https://www.google.com/search?q=${text.value}`
            }
        }
        webview.addEventListener('did-start-loading', function() {
            document.getElementById('searchtext').value = document.getElementById('webview').src
            document.getElementById('message').innerHTML = "読み込み中..."
        });
        webview.addEventListener('did-stop-loading', function() {
            document.getElementById('message').innerHTML = ""
            document.getElementById('searchtext').value = document.getElementById('webview').src
        });
    </script>
</body>

</html>

自分で試したこと

エラーコードで調べたところ同様のログが出力された方がいたので、それを参考にindex.jsにElectron.app.disableHardwareAcceleration()を追加したところ、エラーログは出力されなくなったが、urlが開けない、Electronのwindowが閉じる等の症状は治らない。

同じような症状が起こった方はいらっしゃるでしょうか

0 likes

Are you sure you want to delete the question?