Javascript Electron应用程序中的BrowserWindow渲染_Javascript_Node.js_Html_Electron_Createwindow

Javascript Electron应用程序中的BrowserWindow渲染

javascript node.js html electron

Javascript Electron应用程序中的BrowserWindow渲染,javascript,node.js,html,electron,createwindow,Javascript,Node.js,Html,Electron,Createwindow,我需要一些关于我正在使用Electron构建的应用程序的专家JavaScript帮助。问题的核心是，如果我离开主页（index.html）并回到主页，那么页面会短暂但非常明显地显示div和ul元素，它们构成了页面左侧的垂直选项卡菜单（见下图）我和我的同事似乎无法弄清楚，也无法在网络上找到足够的信息，那就是如何修复或调整此问题。一位我们知道的人建议，也许在Main.js中创建不同的窗口线程时，可以构建某种渲染器来维护这些线程，但他不知道如何实现，我们也没有找到如何实现这一点的信息。这是正确的路径吗

我需要一些关于我正在使用Electron构建的应用程序的专家JavaScript帮助。问题的核心是，如果我离开主页（index.html）并回到主页，那么页面会短暂但非常明显地显示div和ul元素，它们构成了页面左侧的垂直选项卡菜单（见下图）

我和我的同事似乎无法弄清楚，也无法在网络上找到足够的信息，那就是如何修复或调整此问题。一位我们知道的人建议，也许在Main.js中创建不同的窗口线程时，可以构建某种渲染器来维护这些线程，但他不知道如何实现，我们也没有找到如何实现这一点的信息。这是正确的路径吗？

还是这仅仅是一个错误放置或丢失代码的情况，导致页面每次都无法正确加载？

还是其他原因？任何帮助都将不胜感激，因为我在解决这一问题上背负着沉重的负担。提前谢谢你

Index.html呈现：

Index.html后期渲染：

Main.js：

Index.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <link rel="stylesheet" type:"text/css" href="css/jquery-ui.min.css">
  <link rel="stylesheet" type:"text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type:"text/css" href="css/jquery.scrollbar.css">
  <link rel="stylesheet" type:"text/css" href="css/tabs.css">
  <link rel="stylesheet" type:"text/css" href="css/persian-datepicker-0.4.5.min.css">
  <link rel="stylesheet" type:"text/css" href="css/clockpicker.css">
  <link rel="stylesheet" type:"text/css" href="styles.css">
  <link rel="stylesheet" type:"text/css" href="css/entry.css">
  <link rel="stylesheet" type:"text/css" href="css/navbar.css">
  <link rel="stylesheet" type:"text/css" href="css/modal.css">
  <meta id="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
<form name="mainForm">
  <div id="sections">
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
        <li><a href="#section6">Section 6</a></li>
        <li><a href="#section7">Section 7</a></li>
        <li><a href="#section8">Section 8</a></li>
        <li><a href="#section9">Section 9</a></li>
        <li><a href="#section10">Section 10</a></li>
        <li><a href="#section11">Section 11</a></li>
      </ul>
...
  <script>
      window.jQuery = window.$ = require('jquery');
  </script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.scrollbar.min.js"></script>
  <script src="js/persian-date.min.js"></script>
  <script src="js/persian-datepicker-0.4.5.min.js"></script>
  <script src="js/clockpicker.js"></script>
  <script src="js/jqwidgets/jqxcore.js"></script>
  <script src="js/jqwidgets/jqxexpander.js"></script>
  <script src="js/jqwidgets/jqxinput.js"></script>
  <script src="js/jqwidgets/jqxpasswordinput.js"></script>
  <script src="js/jqwidgets/jqxbuttons.js"></script>
  <script src="js/jqwidgets/jqxvalidator.js"></script>
  <script src="js/data.js"></script>
  <script src="js/model.js"></script>
  <script src="js/view.js"></script>
  <script src="js/form-init.js">
  </script>
</form>
</body>
</html>

我无法从你的截图和描述中看出发生了什么，但你试过浏览器窗口吗

另外，如果我不提在Electron应用程序中运行express server通常是一个坏主意，除非你的应用程序只在气隙机器上运行。

从你的屏幕截图和描述中我真的看不出发生了什么，但你试过浏览器窗口吗

此外，如果我不提在Electron应用程序中运行express server通常是一个坏主意，除非您的应用程序仅在气隙机器上运行。

此处的代码示例显示，您正在运行express server，这是Electron主流程的一部分：

var express = require('express');
var expressapp = express();

从我所读到的内容来看，这是一种糟糕的做法，因为这意味着Express服务器必须执行的任何操作都会在服务期间暂时挂起Electron主进程线程。当您进行小文件加载时，这并不是重要的，但任何重要的操作都会使Electron主进程在处理与Express server相关的任何工作时，无法管理其常规任务（更新Electron框架、菜单等——围绕浏览器显示区的应用程序包装器）（这是您创建的，现在运行在电子主进程内部）

有关此问题的更完整解释，请参见：

我还没有找到解决这个问题的好方法，但是将Express server实例绑定到Electron主进程是一个定时炸弹，任何希望扩展应用程序的人都会看到它不仅仅是为几个文件提供服务。

这里的代码示例显示，您正在运行作为Electron主进程一部分的Express server：

var express = require('express');
var expressapp = express();

从我所读到的内容来看，这是一种不好的做法，因为这意味着您的Express服务器必须执行的任何操作都会在服务期间暂时挂起您的Electron主进程线程。当您执行小文件加载时，这并不重要，但任何重要的操作都会使Electron主进程无法管理其常规线程询问（更新electron框架、菜单等——围绕浏览器显示区域的应用程序包装器），同时处理与Express server（您已经创建并现在在electron主进程内运行）相关的任何工作

有关此问题的更完整解释，请参见：

我还没有找到解决这个问题的好方法，但是将Express server实例绑定到Electron主进程是一个定时炸弹，如果你希望扩展你的应用程序，使其不仅仅服务于几个文件。

谢谢你的评论，@Vadim。我感谢你的考虑。首先，我可能没有很好地描述这个问题。Essentially，第二张图片是第一次进入页面时的外观。第一张图片是您短暂看到的（约1秒）当您进入时。选项卡式环境下的带项目符号的无序列表会在不应该的时候显示。遗憾的是，更改背景颜色并不能解决这一问题。其次，我还没有听说过在Electron中使用express server。这是为什么呢？在您发表评论之前，我没有在网上看到任何关于不使用它的内容。@Steve，听起来像是e您有一些元素在没有样式的情况下进行渲染，然后不久就应用了样式。请尝试创建一个隐藏的浏览器窗口，然后在触发事件时使其可见。@Steve至于

express

…如果您在app/本地运行

express

服务器，这意味着您的所有资源都在本地可用，Electron可以直接从磁盘加载

.html

文档和所有相关资源，那么启动HTTP服务器有什么意义呢？此外，当用户在浏览器中打开远程网站时，该网站上的JavaScript可以访问用户机器上运行的HTTP服务器，在上读取。我尝试过隐藏/显示bro您指定的wser窗口，但它没有任何影响。我本以为它会首先渲染整个窗口，但加载时没有明显的差异。修改后的代码发布在下面。想法？谢谢您的评论，@Vadim。我感谢您的考虑。首先，我可能没有很好地描述这个问题。必要首先，第二张图片是第一次进入页面时的外观。第一张图片是您短暂看到的（约1秒）当您进入时。选项卡式环境下的带项目符号的无序列表会在不应该的时候显示。遗憾的是，更改背景颜色并不能解决这一问题。其次，我还没有听说过在Electron中使用express server。这是为什么呢？在您发表评论之前，我没有在网上看到任何关于不使用它的内容。@Steve，听起来像是你有一些元素

var express = require('express');
var expressapp = express();