Question

让我以当前的设置开头这个问题：

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <h1></h1>
        <p>Note One</p>
    </body>
    <script>
        require('./renderer.js')
    </script>
</html>

main.js 主进程

const { app, BrowserWindow } = require('electron')

let mainWindow = null

app.on('ready', () => {
    mainWindow = new BrowserWindow()
    mainWindow.webContents.loadFile('index.html')
})

下面是渲染器，在这里我使用一些基本的DOM方法。有些工作失败了：

renderer.js

document.querySelector('p').remove()
const h2 = document.createElement('h2')
h2.textContent = 'test'

renderer.js的崩溃：

第一行按预期工作，第一个p元素被返回并删除。

第二行不会引起任何可见的错误，但会在静默中无法在DOM中创建h2元素，因此在第3行中不会添加任何文本。

我不了解这种行为，为什么我不能在渲染器过程中访问所有DOM API？

Answer 1

行document.querySelector('p').remove()之所以有效，是因为querySelector返回一个具有<p>方法的单个.remove元素。

第二行document.createElement('h2')创建一个新的<h2>元素，但是显然您没有将其添加到DOM 中，因此GC会将其删除。试试：

const h2 = document.createElement('h2');
h2.textContent = 'Test createElement';
document.body.appendChild(h2);

看看是否可行（提示：应该！）。

在电子渲染器过程中无法访问某些DOM方法

1 个答案: