Question

index.js文件

const {BrowserWindow, app, globalShortcut} = require('electron');
const url = require('url');
const si = require('systeminformation');



let win = null

function boot() {
//console.log(process.type)
win = new BrowserWindow({
    width: 600,
    height: 500,
    frame: false
})

var output = document.getElementById("output");
output.innerHTML = "hello world"
//win.loadURL(file:'//${__dirname}/index.html')
win.loadURL('file://' + __dirname + '/index.html');
win.on('closed', () => {
    win = null
})
}

app.on('ready', boot);

** index.html file **

<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div id="content">
    <header>
        <div class="option" id="close">X</div>
        <div class="option" id="minimize">-</div>
    </header>
<div id="text">z</div>


 <h1>
  <p id="output"></p>
</h1>
</div>
<script src="./assets/js/script.js"></script>
</body>
</html>

所以我使用以下代码段中的值显示在我的HTML页面中

var output = document.getElementById("output");
output.innerHTML = "hello world"

通过我的HTML页面：

<h1>
  <p id="output"></p>
</h1>

但它给了我错误：

＆＃34;引用错误：文档未定义＆＃34;

顺便提一下，我正在创建一个Electron应用程序。只是尝试将我的javascript页面中的一些数据显示到html页面。

Answer 1

根据您提供的代码，您在加载文档之前引用该文档。

var output = document.getElementById("output"); // <- here and
output.innerHTML = "hello world";
win.loadURL('file://' + __dirname + '/index.html'); // <- here

在操作之前检查DOM是否准备就绪。

Answer 2

您的JavaScript文件的名称是index.js。但是您在脚本标记中包含了script.js文件。更改脚本标记以指定index.js文件的路径：

<script src="./path_of_file/index.js"></script>

如何将Javascript函数的值显示到HTML页面上？

2 个答案: