Javascript 在DOM之前在loadURL上加载CSS_Javascript_Electron

Javascript 在DOM之前在loadURL上加载CSS

javascript electron

Javascript 在DOM之前在loadURL上加载CSS,javascript,electron,Javascript,Electron,我想知道如何在网站加载前加载css。我在main.js中尝试了下面的代码 win.webContents.on('did-start-loading', function () { fs.readFile(__dirname + '/home.css', "utf-8", function (error, data) { if (!error) { var formatedData = data.re

我想知道如何在网站加载前加载

css

。我在

main.js中尝试了下面的代码
win.webContents.on('did-start-loading', function () {

        fs.readFile(__dirname + '/home.css', "utf-8", function (error, data) {
            if (!error) {
                var formatedData = data.replace(/\s{2,10}/g, ' ').trim()
                    win.webContents.insertCSS(formatedData)
            }
        })
    })

window.addEventListener("DOMContentLoaded", injecting)
function injecting() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://example.com/hello.css';
    document.documentElement.appendChild(link);
}

它确实起作用了，但是网站的原始样式突然出现了几秒钟，然后它加载了我的样式，如果原始CSS和我的样式完全不同，这是毫无意义的
我还尝试在preload.js

win.webContents.on('did-start-loading', function () {

        fs.readFile(__dirname + '/home.css', "utf-8", function (error, data) {
            if (!error) {
                var formatedData = data.replace(/\s{2,10}/g, ' ').trim()
                    win.webContents.insertCSS(formatedData)
            }
        })
    })

window.addEventListener("DOMContentLoaded", injecting)
function injecting() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://example.com/hello.css';
    document.documentElement.appendChild(link);
}

它也不起作用。它一直显示原始样式，然后在一秒钟后加载我的css。
您无法控制css下载的速度，但您可以实现类似的行为。您可以将body
设置为：
<body class="invisible">
    <!-- Some HTML here -->
</body>

现在，你可以做了
document.body.className=”“一旦CSS加载为：
window.addEventListener("DOMContentLoaded", injecting)
function injecting() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://example.com/hello.css';
    link.onload = (() => {document.body.className = "";});
    document.documentElement.appendChild(link);
}

您无法控制CSS下载的速度，但可以实现类似的行为。您可以将body
设置为：
<body class="invisible">
    <!-- Some HTML here -->
</body>

现在，你可以做了
document.body.className=”“一旦CSS加载为：
window.addEventListener("DOMContentLoaded", injecting)
function injecting() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://example.com/hello.css';
    link.onload = (() => {document.body.className = "";});
    document.documentElement.appendChild(link);
}

但问题是。。。我正在做loadURL，但我无法控制网站或HTML@jeputier我理解。在这种情况下，您可以将document.body.display=“none”作为第一个操作添加到document.body.display=“block”；当链接加载后。我按你说的做了，但它不起作用。。。你能用正确的方式更新你的问题吗？@jeputier它怎么不起作用？您在控制台中遇到错误了吗？您还可以针对您的问题创建一个JSFIDLE（无论如何，这主要是一个Javascript问题）。如果您这样做，那么我们将更容易检测和修复确切的问题。它工作了，但它仍然显示了一秒钟的原始网站，然后切换到我的。加上html中的body标记甚至没有任何类…但问题是。。。我正在做loadURL，但我无法控制网站或HTML@jeputier我理解。在这种情况下，您可以将document.body.display=“none”作为第一个操作添加到document.body.display=“block”；当链接加载后。我按你说的做了，但它不起作用。。。你能用正确的方式更新你的问题吗？@jeputier它怎么不起作用？您在控制台中遇到错误了吗？您还可以针对您的问题创建一个JSFIDLE（无论如何，这主要是一个Javascript问题）。如果您这样做，那么我们将更容易检测和修复确切的问题。它工作了，但它仍然显示了一秒钟的原始网站，然后切换到我的。另外html中的body标记甚至没有任何类。。。