为啥 Electron 页面不直接加载 JQuery? [复制]

Posted

技术标签:

【中文标题】为啥 Electron 页面不直接加载 JQuery? [复制]【英文标题】:Why does Electron page not directly load JQuery? [duplicate]为什么 Electron 页面不直接加载 JQuery? [复制] 【发布时间】:2021-01-15 02:11:18 【问题描述】:

最近,我想用电子和引导程序编写一个应用程序。我在get started page of bootstrap 上使用sn-p。就像下面一样。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional javascript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

这是一个非常简单的页面,直接用浏览器打开就可以了。但是,当我像这样在电子上通过new BrowserWindow 启动它时。

const  app, BrowserWindow  = require('electron')

function createWindow () 
  // Create the browser window.
  const win = new BrowserWindow(
    width: 800,
    height: 600,
    webPreferences: 
      nodeIntegration: true
    
  )

  // and load the index.html of the app.
  win.loadFile('index.html')


app.whenReady().then(createWindow)

会得到的错误

我尝试了很多方法并通过本地需要这样的 jquery 来修复它

  <script>
    window.jQuery = window.$ = require('jquery');
  </script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>

但我想知道为什么它会遇到这个错误? bootstrap sn-p 上的所有脚本来源都来自 CDN,并且在浏览器上运行良好。它应该在电子上工作。

【问题讨论】:

打开开发工具并在网络选项卡上显示发生了什么以及为什么它不加载。 【参考方案1】:

我认为这可能是因为在 Electron 中提供了 Node.js 上下文,jQuery 认为它在 Node 上运行并且就像在 Node 上需要 jQuery 一样 - 这与浏览器根本不同。不过我会感到惊讶,因为我认为 jQuery 会首先检查窗口对象是否存在,这在 Electron 中应该是这种情况。

【讨论】:

这不是真的,jquery中没有“以节点模式运行”。 如果您查看 3.5.1 (unpkg.com/jquery@3.5.1/dist/jquery.js) 的源代码,您会在第 18 行找到:if ( typeof module === "object" &amp;&amp; typeof module.exports === "object" ) 所以 jQuery 确实 在运行在浏览器和节点中。 我对其进行了测试,如果在创建 BrowserWindow 时禁用 nodeIntegration,则不会出现错误。这表明此处存在的 Node 上下文确实发挥了作用。 我找到了原因,在第 10864 行你有 if (typeof noGlobal === 'undefined') window.jQuery = window.$ = jQuery; 当使用 nodeContext 运行时,noGlobal 设置为 true,根据第 28 行,这就是为什么 $ 没有在窗口上导出因此引导程序找不到它。 他确实提到他能够解决它,并明确询问为什么它不起作用,这是我在回答中解释的。

以上是关于为啥 Electron 页面不直接加载 JQuery? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

jquer和document加载失败 --解决方案

jquer easyui 怎么在打开窗口时重新加载里面的form表单

js引入时第一次的为啥没加载,你刷新一下他就加载了?

Electron页面加载事件发生顺序

electron项目打包之后显示空白页面以及发送http请求地址错误

electron项目打包之后显示空白页面以及发送http请求地址错误