时间戳

首页 > 解决方案 > Bootstrap Accordian 不会与 Electron 一起崩溃，但 HTML 文件在 Electron 之外可以正常工作

html - Bootstrap Accordian 不会与 Electron 一起崩溃，但 HTML 文件在 Electron 之外可以正常工作

问题描述

我有两个正在运行的示例，它们都使用相同的 HTML 页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    
    <title>Document</title>
</head>
<body>
    <table class="table">
        <tr class="head">
            <th></th>
            <th>Skill</th>
            <th>Cost</th>
            <th>Ranks</th>
            <th>Total</th>
            <th>Adjusted Total</th>
            <th></th>
        </tr>
        <tr id="content_1">
          <td><a role="button" data-toggle="collapse" href="#additional_row1" aria-expanded="false" aria-controls="additional_row1"><i class="fa fa-plus"></i></a></td>
          <td>Artistic</td>
          <td>4</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
            <td colspan=7 class="collapse" id="additional_row1">test</td>
        </tr>
      </table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>

    </script>
</body>
</html>

如果我自己在浏览器中运行这个 HTML 代码，它就可以工作。

如果我在 Electron 中运行它……它一旦展开就不会崩溃。我不知道为什么 Electron 拒绝正确切换它。

这里值得的是我的 package.json 用于电子

{
  "name": "electronproject",
  "version": "1.0.0",
  "description": "Shopping List desktop app",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Shopping List App\"",
    "package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/icon.png --prune=true --out=release-builds"
  },
  "author": "David Klecker",
  "license": "ISC",
  "dependencies": {
     "jquery": "^3.5.0",
     "boostrap": "^2.0.0",
     "electron": "^8.2.0",
     "electron-reload": "^1.5.0",
     "xml2js": "^0.4.23"
  },
  "devDependencies": {
    "electron-packager": "^14.2.1"
  }
}

标签： htmltwitter-bootstrapelectron

解决方案

这可能是让 jQuery 与 Electron 一起工作的问题。如果您在渲染器进程中打开了 Node 集成，jQuery 会因为尝试定义的一些冲突符号而导致加载问题。

Electron FAQ中有更多信息。

解决此问题的最简单方法是nodeIntegration在 BrowserWindow 中关闭。

// In the main process.
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})

如果你想继续nodeIntegration，你可以通过在导入 jQuery 之前重命名冲突的符号来避免命名冲突。

<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>

我可以让您的代码片段与 Electron 上的上述任一解决方案一起正常工作8.0.0。

推荐阅读