Question

我试图在将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：未定义窗口”

Answer 1

我刚刚检查了您的代码，并使其能够工作。请记住，在head标记内链接脚本可能会导致问题，因为执行脚本时，尚未加载html文档的其余部分。将您的html元素包装在body标签中，然后在下面添加脚本。这应该起作用。

<!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

您做事的顺序很重要。

要更好地了解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()
})

Answer 3

窗口是浏览器提供给环境的窗口，例如滚动条的宽度和高度添加事件监听器

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


}

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

3 个答案:

编辑注释中的用例