HTML file not loading the same in Electron as in browser window

Question

I am trying to write a program to display weather data using the openweathermap.org API while using MaterializeCSS to make it look nice and pretty. However, currently my code does not appear to be loading the same in Electron as in my web browser. It works properly in the web browser (the lastest version of Google Chrome), while in Electron the buttons and animations are not working properly at all. There are no animations and the different tabs do not display correctly. When clicked, the tabs do nothing and all of the contents of the tabs show at once. See below.

https://i.stack.imgur.com/PdR4z.png

The file appears in the browser correctly as shown below.

https://i.stack.imgur.com/kAYpS.png

Here is the code for index.html:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
const functions = require('./functions')

let win;

function createWindow () {
    win = new BrowserWindow({width: 1280, height: 720});

    win.loadURL('file://' + __dirname + '/index.html');

    functions.getData(function(data) {
        console.log(data);
    });

    //win.webContents.openDevTools()

    win.on('closed', () => {
        win = null
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    // mac stuff
    if (process.platform !== 'darwin') {
        app.quit()
    }
});

app.on('activate', () => {
    // more mac stuff
    if (win === null) {
        createWindow()
    }
});

// materializecss.com for the the css used.

<!DOCTYPE html>
<html>
    <head>
        <!--  micron.js  -->
        <link href="https://unpkg.com/webkul-micron@1.0.4/dist/css/micron.min.css" type="text/css" rel="stylesheet">
        <!--             -->
        <!-- materialize -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
        <link rel="stylesheet" href="/css/style.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--             -->
        <!--   scripts   -->
        <script type="text/javascript" src="./functions.js"></script>
        <!--             -->
        <meta charset="utf-8">
        <title>Material Weather</title>
    </head>
    <body>
        <nav class="nav-extended light-blue">
            <div class="nav-wrapper light-blue">
                <a href="#" class="brand-logo center light-blue">Material Weather</a>
                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            </div>
            <div class="nav-content light-blue">
                <ul class="tabs tabs-fixed-width light-blue">
                    <li class="tab"><a href="#today" class="white-text">Today</a></li>
                    <li class="tab"><a href="#tomorrow" class="white-text">Tomorrow</a></li>
                    <li class="tab"><a href="#10day" class="white-text">10 Day</a></li>
                </ul>
            </div>
        </nav>
        <div id="today" class="col s12">Today</div>
        <div id="tomorrow" class="col s12">Tomorrow</div>
        <div id="10day" class="col s12">10 Day</div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
        <script src="https://unpkg.com/webkul-micron@1.0.4/dist/script/micron.min.js" type="text/javascript"></script>
    </body>
</html>

If you need any additional information, please do not hesitate to ask. Thank you in advance for your time.

score 6 · Answer 1 · edited Mar 12 '19 at 18:36

The issue was the jQuery wasn't loading properly in the Electron window. After literally hours of rummaging through the internet trying to find a fix, this is what I've come up with.

Put this at the beginning of the scripts section of your code:

<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

Put this at the end of your scripts section:

<script>if (window.module) module = window.module;</script>

From what I've read, it essentially forces the window to use every module imported and it is a common fix for other similar problems.

So, my code now looks like this at the end:

    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> <!-- makes jquery actually work -->
    <!-- scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <script src="https://unpkg.com/webkul-micron@1.0.4/dist/script/micron.min.js" type="text/javascript"></script>
    <!--         -->
    <script>if (window.module) module = window.module;</script> <!-- makes jquery actually work -->```

Is there a solution if is not my website? Want to open a website in BrowserWindow that is not my own — Lucas, Feb 11 '21 at 11:20

score 0 · Answer 2 · answered Feb 06 '18 at 00:55

0

This is a wild guess as I have only built one app with Electron but I did have a similar issue and I had to include dependancies in the package.json file.

 "dependencies": {
    "bootstrap": "^3.3.7"
},

answered Feb 06 '18 at 00:55

Sam

111
3

thanks for your tip, however this didn't change anything. this problem really doesn't make sense to me because in theory, the same html file being loaded in the browser should be being loaded by main.js. – Will Feb 06 '18 at 03:18
Sorry Will, This is a little beyond me in that case as I had issues with bootstrap styling and jQuery. – Sam Feb 06 '18 at 22:42

HTML file not loading the same in Electron as in browser window

2 Answers2