WebView occasionally not loading (With Reproducible test case)


#1

Hi

I have a problem where an embedded WebView is very occasionally not completing its load of a web page.

I see the did-start-loading event fired but then no further events.

I’m preloading some JavaScript but on the occasions the load doesn’t complete this JS is also not being executed?

It seems to be seemingly random occurrence.

Has anyone else come across this?

Thanks
Andy


#2

I’ve actually come up with a simple repro app on Windows. If you create an Electron application with the following main.js and pluginhost.html. Write a batch file that starts it around 40 times and you will see in the windows task manager several instances that still have the caption “NOT LOADED” and will have a red background and the others have a caption of “DONE” and will load the Electron web site. In these cases the web view hasn’t actually fully loaded the page but has just fired the did-start-loading event.

Any ideas?

main.js
"use strict";

const electron = require( "electron" );
const {app} = electron;
const {BrowserWindow} = electron;

var mainWindow = null;

app.on( 'ready', function ()
{
    mainWindow = new BrowserWindow( null );

    mainWindow.loadURL( 'file://' + __dirname + '/pluginhost.html' );

} );

app.on( 'window-all-closed', function ()
{
    app.quit();
} );

pluginhost.html

<!DOCTYPE html>
<html>
<head>
	<title>NOT LOADED</title>
</head>

<body id="docBody" style="background-color: #ffff00">
	<webview id="webView"  src="http://electron.atom.io/"></webview>

	<script>
		var loadstop = function()
		{
			document.title = "DONE";
			document.getElementById("docBody").style.backgroundColor="#00ff00";
		}

		onload = function()
		{
			document.getElementById("docBody").style.backgroundColor="#ff0000";

			document.getElementById("webView").addEventListener("did-finish-load", loadstop);
			document.getElementById("webView").addEventListener("did-start-loading", function() { console.info("did-start-loading"); } );
		}
	</script>
</body>

</html>

#3

It’s my understanding that the content of the webpage is not necessarily in the DOM by the time that the onload event fires. In the most recent Electron toy project I was playing around with I used document.addEventListener('DOMContentLoaded', ...) to ensure that the web page was fully rendered before I did anything like document.getElementById because I noticed the same unreliability as you’re describing.


#4

Thanks for the reply.

So do you mean you hook DOMContentLoaded of the webview or of the document loaded in the BrowserWindow that hosts the webview?

So I’m seeing two different symptoms with the code above.

  1. Occasionally (~10%) of starts the browserWindow is loaded with is contents BUT the webview fires the did-start-loading but no other events and the content doesn’t load
  2. Occasionally (~2%) of starts the browserWindow is created BUT never loads its html contents let alone the webview and just appears as a white window.
  3. Rest of the time it’s fine.

Now I’m not sure if it’s because the way I’m using Electron is because I’m starting a new Electron root process with each load or it’s something else?

Any ideas?


#5

I use document.addEventListener from a JavaScript file linked into the HTML that I load in the renderer process.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <canvas id="board" width="700" height="500">
      Pretend there's a cool hexagonal game board here
    </canvas>
    <script src="./index.js"></script>
  </body>
</html>

index.js

import Hex from '../renderer/hex'
import Point from '../renderer/point'

document.addEventListener('DOMContentLoaded', () => {
  let canvas = document.getElementById('board')
  let context = canvas.getContext('2d')
  let hex = new Hex(new Point(75, 75), 50)
  context.strokeStyle = 'green'
  context.lineWidth = 2
  context.stroke(hex.getPath())
})