我试图在浏览器中加载 html 页面时更新其背景颜色。我有 Node.js 脚本，可以在页面中设置背景
下面是我到目前为止尝试过的html页面和node.js脚本
<html>
<style type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 20px;
padding-right: 20px;
}
</style>
<head>
<script src ="Bind_script.js">
</script>
</head>
<h1>"The dns ip is: " <span id="myID"></span></h1>
<div class="Heading">
<div Class="Cell">
<p>G</p>
</div>
<div Class="Cell">
<p>facebook.com</p>
</div>
<div id="test">
<span id="h" class="Cell">
<p>H</p>
</span>
<span id="e" class="cell">
<p>E</p>
</span>
<span id ="Time" class="Cell">
<P> </P>
</span>
</div>
<div Class="Cell">
<p></p>
</div>
</div>
</html>
This is part of separate node.js script - Bind_script.js" which is already binded in the html page.
function update_BG(col) {
window.addEventListener('load', function() {
console.log('All assets are loaded')
document.getElementById(col).style.background = "green";
})
}
const dns = require('dns');
dns.lookup('facebook.com', function(err,result){
if(result='157.240.23.35'){
update_BG("h")
}
});
预计: 执行脚本后，跨度 ID ('h') 应更新为绿色。
实际: 我收到以下错误
ReferenceError: window is not defined"
最佳答案
做事的顺序很重要。
为了更好地理解 window.onload 和 document.onload，请参阅 window onload vs document onload 上堆栈溢出的这个答案。 .
一般来说，有几个步骤，其中有几个步骤总是以相同的顺序发生:
- 将 NodeJS 代码转换为浏览器 JavaScript 代码(如果适用)
- 浏览器下载 html 文件
- 浏览器请求后续文件，例如脚本和样式
- 窗口被加载(窗口加载事件)
- 加载 DOM 内容(DOMContentLoaded 事件)
- 文档(任何剩余的 CSS 和图像)被加载(文档加载事件)
只有当 DOMContentLoaded 事件触发时，您才能操作 DOM。
您可以尝试以下操作:
在加载所有资源之前运行脚本
window.addEventListener('DOMContentLoaded', function() {
console.log('DOM is loaded')
document.getElementById("p").style.background = "green"
})
或者在加载所有资源之后
window.addEventListener('load', function() {
console.log('All assets are loaded')
document.getElementById("p").style.background = "green"
})
示例 here .
编辑评论中的用例
如果您还需要更改代码中其他位置的背景，则可以将此功能放置在函数中，如下所示；
function colorParagraphsBackground() {
document.getElementById("p").style.background = "green"
}
window.addEventListener('DOMContentLoaded', function() {
console.log('DOM is loaded')
colorParagraphsBackground()
})
关于javascript - "Window.onload"无法在 Node.js 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57835513/