win.reload显示在电子中显示空白的白色窗口

问题描述

网络重新连接后，我需要重新加载我的站点/应用程序.因此，我在重新连接后使用 win.reload ，但重新加载后显示我空白的屏幕

我试图重新创建窗口，但是它给了我相同的输出.我在此处报道了一个问题./p>

重新加载后，我发现 window.location.href 设置为"chrome-error://chromewebdata/"

此示例代码来自main.js

 让mainWindow = null;让offlineWindow = null;让loadingwindow = null;让mainWindowWidth = 1100;让mainWindowHeight = 650;var nativeApp = {appUrl:"https://google.com"，已连接:错误}函数createWindow(){//创建浏览器窗口.mainWindow = new BrowserWindow({webPreferences:{nodeIntegration:否，preload:path.join(app.getAppPath()，'preload.js')}，minWidth:mainWindowWidth，宽度:mainWindowWidth，minHeight:mainWindowHeight，高度:mainWindowHeight，显示:错误});createLoadingWindow();mainWindow.once('ready-to-show'，()=> {closeLoadingWindow();mainWindow.show();});mainWindow.setMenu(null);mainWindow.loadURL(nativeApp.appUrl);mainWindow.webContents.openDevTools();}函数createLoadingWindow(){//创建加载窗口的代码//.....}函数createOfflineWindow(){//创建脱机窗口的代码//..}函数checkAndConnect(){checkInternet(功能(已连接){如果(！已连接){如果(！offlineWindow){createOfflineWindow();}} 别的 {如果(offlineWindow){offlineWindow.close();mainWindow.reload();}}nativeApp.connected =已连接；});}功能checkInternet(callback){if(navigator.onLine){返回回调(true);}返回回调(false);} 

重新连接后，我需要重新加载网站/应用程序.我的代码有什么问题吗?还是电子的虫子?

解决方案

这是一个旧线程，但是如果有人遇到相同的问题，则可以通过在主js文件中添加以下内容来解决此问题:

  function createMainWindow(){mainWindow = new BrowserWindow({宽度:1280，高度:720，...})//此代码块与问题无关//我添加了它，以演示我的应用如何加载索引页面如果(process.env.WEBPACK_DEV_SERVER_URL){如果(！process.env.IS_TEST){mainWindow.webContents.openDevTools()}}别的 {createProtocol('app')mainWindow.loadURL('app://./index.html')}//创建将处理白屏问题的侦听器mainWindow.webContents.on('did-fail-load'，()=> {如果(process.env.NODE_ENV ==='生产'){//加载索引网址的方式与您在上方加载索引网址的方式相同mainWindow.loadURL('app://./index.html')}})... 

I need to reload my site/app after network re-connect. So, I'm using win.reload after reconnect but after reloading it shows me a blank white screen

I have tried to re-create the window but it gives me the same output. Another question reported here by me.

I found window.location.href is set to "chrome-error://chromewebdata/" after reload

This sample code from is main.js

  let mainWindow = null;
  let offlineWindow = null;
  let loadingwindow = null;
  let mainWindowWidth = 1100;
  let mainWindowHeight = 650;

  var nativeApp = {
    appUrl: "https://google.com",
    connected: false
  }

  function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
      webPreferences: {
        nodeIntegration: false,
        preload: path.join(app.getAppPath(), 'preload.js')
      },
      minWidth: mainWindowWidth,
      width: mainWindowWidth,
      minHeight: mainWindowHeight,
      height: mainWindowHeight,
      show: false
    });

    createLoadingWindow();

    mainWindow.once('ready-to-show', () => {
      closeLoadingWindow();
      mainWindow.show();
    });

   mainWindow.setMenu(null);
   mainWindow.loadURL(nativeApp.appUrl);
   mainWindow.webContents.openDevTools();
 }

  function createLoadingWindow(){
    // codes to create the loading window
    // .....
  }

  function createOfflineWindow(){
    // codes to create the offline window
    //....
  }

  function checkAndConnect() {
    checkInternet(function (connected) {
      if (!connected) {
        if (!offlineWindow) { createOfflineWindow(); }
      } else {
        if (offlineWindow) {
          offlineWindow.close();
          mainWindow.reload();
        }
      }
      nativeApp.connected = connected;
    });
  }

  function checkInternet(callback) {
    if(navigator.onLine){
      return callback(true);
    }
    return callback(false);
  }

I need to reload my site/app after re-connection. Is there anything wrong in my code? or is it a bug by the electron?

解决方案

It's an old thread, but if someone comes across the same problem, you can fix it by adding the following in the main js file:

function createMainWindow () {
  mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    ...
  })

  // This code block is not related to the issue
  // I included it to demostrate how my app loads the index page
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    if (!process.env.IS_TEST) { 
      mainWindow.webContents.openDevTools() 
    }
  } 
  else {
    createProtocol('app')
    mainWindow.loadURL('app://./index.html')
  }

  // Create listener that will handle the white screen issue
  mainWindow.webContents.on('did-fail-load', () => {
    if (process.env.NODE_ENV === 'production') {
      // Load the index URL the same way you load it above
      mainWindow.loadURL('app://./index.html')
    }
  })
...

这篇关于win.reload显示在电子中显示空白的白色窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！