gpt4 book ai didi

html - 使用 Node 服务器时,css js 不链接到链接的 html 文件

转载 作者:太空宇宙 更新时间:2023-11-04 02:07:44 29 4
gpt4 key购买 nike

我正在尝试使用 Node js 服务器提供 .css .js 等静态文件。 index.html 文件得到服务,链接的 css 和 js 也被加载。

现在我在index.html 文件中有一个div,我将另一个名为login.html 的html 文件的内容加载到其中。这个login.html 文件有一个链接到它的css 和一个js 文件。login.html 本身使用 jquery 函数 load() 加载,这意味着它可以被服务器访问。但是,由于文件路径错误,链接到 login.html 的 css 和 js 未加载。

这是文件夹结构see this image

以下是index.html的主要部分

<!DOCTYPE html>
<html>
<head>
<title>Anything</title>
<link href="./index/index.css" type="text/css" rel="stylesheet"> //These files
<script src="./Resources/jquery/jquery-3.2.1.js"></script> //get loaded
<script src="./index/index.js"></script> //by the server
</head>
<body>
<div class="content"></div> // I am trying to load login.html here
</body>
</html>

这是jquery函数

$(".user").click(function(){                       
$(".content").load("./../pages/login/login.html");
});

“.user”是一个我没有在index.html中显示的div

这是登录.html

<link href="./login.css" type="text/css" rel="stylesheet">  //doesn't load
<script src="./login.js"></script> //doesn't load
<h2>Login is loaded</h2>

最后这是用于创建 Node js 服务器的 server.js

var express = require("express");
var app = express();
var path = require("path");

app.set('port', 8080);
app.use(express.static(path.join(__dirname, "public")));
app.use(express.static(path.join(__dirname, "login")));

var server = app.listen(app.get('port'), function() {
var port = server.address().port;
});

console.log("Server running.");

我知道 css 和 js 文件未加载,因为我在 chrome 开发人员工具窗口中看到此错误:

GET http://localhost:8080/login.css 

结论:服务器无法加载辅助服务的html文件的css和js文件,因为请求url错误。但是,index.css 和index.js 文件会通过正确的url 加载。

目标:通过login.html页面使用此node js服务器加载login.css和login.js。

最佳答案

您需要更改 login.html 中的相对路径以匹配服务器上的相对路径,这样 ./login.css 将变为 ./../pages/login/login.css(就像您用来加载 login.html 文件的路径)

关于html - 使用 Node 服务器时,css js 不链接到链接的 html 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43558265/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com