您可以使用 nodejs 將外部 JavaScript 文件中的 function 導入到 HTML 文件中嗎？

Question

我正在嘗試創建一個帶有基本/過濾器搜索列表的 web 頁面，但它會搜索 txt 文件中的數據並返回包含請求結果的文件名。 因此，我需要運行一個 function，它使用可以在服務器端使用 readFileSync 的 NodeJS 從 JavaScript 文件中提取上述 txt 文件中的數據，然后將結果返回到客戶端的 HTML 文件。

這是 JS 文件 function.js：

const http = require('http');
const fs = require('fs');
var index = fs.readFileSync('functioncall.html');

//The function run by the HTML file
function myFunction() {
    var nameArray = ['./File1.txt', './File2.txt'], resultArray = [], input, filter, ul, li, i, nameValue, fileText;

    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");  
    
    //Run through the file names and check if the requested text exists in the file, then push the name into an array if successful, else null
    For (i = 0; i < nameArray.length; i++) {
        nameValue = nameArray[i];
        
        fileText = fs.readFileSync(nameValue, {encoding:'utf8', flag:'r'}).value.toUpperCase();

        if (fileText.indexOf(filter) >= 0) { 
          resultArray.push(nameValue);
        }
        else{
          resultArray.push(null);
        }
    }
    //If the search function gets a hit, display the name in the HTML file
    for (i = 0; i < li.length; i++) {
        if (resultArray[i] != null) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
   }
}


http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(index);
}).listen(3000);

這是 HTML 文件，functioncall.html

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src="function.js"></script>  
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>File Search</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for text.." title="Type in text">

<ul id="myUL">
  <li><a href="#">File1.txt</a></li>
  <li><a href="#">File2.txt</a></li>
</ul>

</body>
</html>

據我所知，在運行 NodeJS 時，HTML 文件找不到 function。我知道這可能是客戶端 HTML 文件無法與服務器端 JS 文件通信的問題，但我一直在尋找，但我還沒有找到適合我的解決方案。

Answer 1

Node JS 不用於客戶端邏輯。 看起來你正試圖在客戶端上創建一個服務器，這沒有多大意義。 在嘗試推進您的項目之前，我建議對客戶端和服務器端 Javascript 進行更多研究。

您可以使用 nodejs 將外部 JavaScript 文件中的 function 導入到 HTML 文件中嗎？

問題描述

1 個解決方案

解決方案1
0 2022-11-30 21:56:22

您可以使用 nodejs 將外部 JavaScript 文件中的 function 導入到 HTML 文件中嗎？

問題描述

1 個解決方案

解決方案1 0 2022-11-30 21:56:22

解決方案1
0 2022-11-30 21:56:22