2016-03-05 53 views
1

我在加載jquery時遇到了問題。電子應用程序jquery模塊未加載

當main.js我把

mainWindow.loadURL('http://localhost:3000/menu'); 

的問題只存在我送回來menu.html

然而,當我用這個方法jQuery的正常工作

mainWindow.loadURL('ile://' + __dirname + '/menu.html'); 

我需要它使用本地主機。

回答

1

這是一個已知的問題。這是因爲JQuery自動感知node.js的存在--Electron向瀏覽器添加了一個node.js上下文,因此JQuery會感到困惑。

最好的方法是通過NPM安裝了jQuery,使用electron-rebuild然後改變你的HTML文件看起來像:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>My Electron App</title> 

    <link href="stylesheets/main.css" rel="stylesheet" type="text/css"> 
    <link href="./node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css"> 

    <script src="helpers/context_menu.js"></script> 
    <script src="helpers/external_links.js"></script> 

</head> 
<body> 

    <div class="container"> 
    <h1 id="greet"></h1> 
    <p class="subtitle"> 
     Welcome to <a href="http://electron.atom.io" class="js-external-link">Electron</a> app running on this magnificent <strong id="platform-info"></strong> machine. 
    </p> 
    <p class="subtitle"> 
     You are in <strong id="env-name"></strong> environment. 
    </p> 
     <div class="jumbotron"> 
      <h1>Bootstrap Test</h1> 
      <p> 
       Some content that should be in a Bootstrap "jumotron" box. 
       If it isn't, check your html code to make sure that the Bootstrap css is loaded. 
       Also check the dev console in the app to look for errors. 
      </p> 
     </div> 
    </div> 

    <script>window.$ = window.jQuery = require('jquery');</script> 
    <script src="app.js"></script> 

</body> 
</html> 

這是一個標準的樣板,但與特殊的JQuery裝載機腳本和app.js裝載機移動在此之後,如果您在正常的應用程序腳本中需要使用jQuery進行任何操作 - 例如,加載Twitter Bootstrap現在可以通過使用npm來安裝引導程序,執行electron-rebuild,然後在您的app.js中使用此腳本:

import bootstrap from 'bootstrap';