“ Window.onload”在Node.js中不起作用

Question

Iam trying to update the background color of the html page when it loaded in the browser. 我试图在加载到浏览器中时更新html页面的背景颜色。 I have Node.js script that would set the background in the page 我有可以在页面中设置背景的Node.js脚本

Below is the html page and node.js script i tried so far 以下是到目前为止我尝试过的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")
    }

    });

Expected: The span id ('h') should update with green color once after the script is executed. 预期：执行脚本后，范围ID（'h'）应该用绿色更新一次。

Actual: I am getting following error 实际：我遇到以下错误

ReferenceError: window is not defined" ReferenceError：未定义窗口”

Answer 1

I just checked your code and was able to make it work. 我刚刚检查了您的代码，并使其能够工作。 Keep in mind that linking a script inside the head tag can cause issues because when the script is executed the rest of the html document has not loaded yet. 请记住，在head标记内链接脚本可能会导致问题，因为执行脚本时，尚未加载html文档的其余部分。 Wrap your html elements in a body tag and then add the script below. 将您的html元素包装在body标签中，然后在下面添加脚本。 This should work. 这应该工作。

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>My Page</title> </head> <body> <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> </body> <script src="Bind_script.js"></script> </html>

Answer 2

The order in which you do things is important. 做事的顺序很重要。

To get a better understanding of window.onload and document.onload, see this answer on stack overflow on window onload vs document onload . 为了更好地了解window.onload和document.onload，请参见window onload与document onload有关堆栈溢出的答案。

In general there are a few steps there are a few steps that always happen in the same order: 通常，有几个步骤，总是有几个步骤以相同的顺序发生：

Transpiling nodejs code to browser javascript code (if applicable) 将nodejs代码转换为浏览器javascript代码（如果适用）
Browser downloads html file 浏览器下载html文件
Browser requests subsequent files like scripts and styles 浏览器请求后续文件，例如脚本和样式
Window gets loaded (window load event) 窗口被加载（窗口加载事件）
DOM content gets loaded (DOMContentLoaded event) 加载DOM内容（DOMContentLoaded事件）
Document (any remaining css and images) gets loaded (document load event) 文档（所有剩余的CSS和图像）被加载（文档加载事件）

Only when DOMContentLoaded event fires, you're able to manipulate your DOM. 只有在DOMContentLoaded事件触发时，您才可以操纵DOM。

You may attempt the following: 您可以尝试以下操作：

To run the script before all assets are loaded 在加载所有资产之前运行脚本

window.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is loaded')
  document.getElementById("p").style.background = "green"
})

or after all assets are loaded 或加载所有资产后

window.addEventListener('load', function() {
  console.log('All assets are loaded')
  document.getElementById("p").style.background = "green"
})

Example here . 这里的例子。

Edit for use case in comment 在评论中编辑用例

If you also have to change the background somewhere else in your code, you can place this functionality in a function, like so; 如果还必须在代码的其他地方更改背景，则可以将此功能放置在一个函数中，如下所示；

function colorParagraphsBackground() {
  document.getElementById("p").style.background = "green"
}

window.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is loaded')
  colorParagraphsBackground()
})

Answer 3

the window is the Envirmantal by the browser provide to some thig like scroll width and height add event listener 窗口是浏览器提供给环境的窗口，例如滚动宽度和高度，以及添加事件侦听器

window.addEventListener('load', function() {
  document.getElementById("p").style.background = "green";


}

“ Window.onload”在Node.js中不起作用

问题描述

3 个解决方案

解决方案1
0 2019-09-07 16:47:46

解决方案2
0 2019-09-07 16:58:29

Edit for use case in comment 在评论中编辑用例

解决方案3
0 2019-09-07 17:00:53

“ Window.onload”在Node.js中不起作用

问题描述

3 个解决方案

解决方案1 0 2019-09-07 16:47:46

解决方案2 0 2019-09-07 16:58:29

Edit for use case in comment 在评论中编辑用例

解决方案3 0 2019-09-07 17:00:53

解决方案1
0 2019-09-07 16:47:46

解决方案2
0 2019-09-07 16:58:29

解决方案3
0 2019-09-07 17:00:53