Question

我是电子的新手，我正在尝试使用以下html代码在Electron的渲染过程中显示一个简单的导航栏：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">-->
    <link rel="stylesheet" href="../../node_modules/bulma/css/bulma.min.css">
    <link rel="stylesheet" href="../../node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
            <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
        </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item">
                Home
            </a>

            <a class="navbar-item">
                Documentation
            </a>

            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link">
                    More
                </a>

                <div class="navbar-dropdown">
                    <a class="navbar-item">
                        About
                    </a>
                    <a class="navbar-item">
                        Jobs
                    </a>
                    <a class="navbar-item">
                        Contact
                    </a>
                    <hr class="navbar-divider">
                    <a class="navbar-item">
                        Report an issue
                    </a>
                </div>
            </div>
        </div>

        <div class="navbar-end">
            <div class="navbar-item">
                <div class="buttons">
                    <a class="button is-primary">
                        <strong>Sign up</strong>
                    </a>
                    <a class="button is-light">
                        Log in
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>
</body>
</html>

如果我使用firefox打开此html文件，效果很好，但是渲染器进程仅显示徽标，而不显示菜单。这是主要的流程代码：

exports.createWindow = () => {

    // TODO only use in dev mode
    require('devtron').install();

    const primary_display = electron.screen.getPrimaryDisplay();

    this.win = new BrowserWindow({
        width: primary_display.size.width / 1.5, height: primary_display.size.height / 1.5,
        minWidth: primary_display.size.width / 2, minHeight: primary_display.size.height / 2,
        title: "Client v" + app.getVersion(),
        show: false
    });

    // Open dev tools
    this.win.openDevTools();

    // Allow to directly show the app in a native app style
    this.win.once("ready-to-show", () => {
        this.win.show()
    });

    // and load the main.html of the app.
    this.win.loadURL(`file://${__dirname}/../renderer/main.html`);

    // Emitted when the window is closed.
    this.win.on('closed', () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        this.win = null;
    });

    // Build menus from template
    Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu.getMenuTemplate(this.win)));
    const mainSession = this.win.webContents.session;
};

这是结果。使用Firefox打开html文件时：

在电子变红的过程中：

知道为什么会这样吗？非常感谢！

编辑：似乎电子渲染器将我的网页渲染为移动网页，我不知道为什么会发生这种情况。

电子：渲染器进程未渲染导航栏

0 个答案: