在服务器的html文件中添加.js文件作为源文件

add .js file as source in html file from server

本文关键字：文件 js 源文件 添加 服务器 html      更新时间：2023-09-26

我的服务器上有一个HTML文件，同一台服务器上也有一个Javascript文件。我想要它，这样当我加载HTML文件时，它将引用放在服务器上的.js文件。

我试过这种方法：

<html>
    <head>
        <script type="text/javascript src="...server side path...."></script>
    </head>
</html>

但它不起作用。有人能告诉我怎么做吗？！我附上了代码

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:form="http://www.w3.org/2002/xforms" xml:lang="en">
<head>
<script type="text/javascript" src="~/FormFaces/formfaces.js"></script>
<form:model>
<form:instance>
    <data xmlns="">
<textbox1></textbox1>
<textbox2></textbox2>
<textbox3></textbox3>
    </data>
</form:instance>
</form:model>
</head>

<body>
<table><tr><td><form:input ref="textbox1">
<form:label>TextBox1</form:label>
</form:input>
</td><td><form:input ref="textbox2">
<form:label>TextBox2</form:label>
</form:input>
</td></tr><tr><td><form:input ref="textbox3">
<form:label>TextBox3</form:label>
</form:input>
</td><td></td></tr>
</table></body>
</html>

`我希望formfaces.js文件包含在我的Text.html文件中。但是，当我在浏览器中通过本地服务器运行text.html文件时，它不会加载formfaces.js文件。如果我手动运行该文件，所有的都可以正常运行

我想问题可能是您不知道如何创建javascript文件的路径。

如果是这种情况，最简单的方法是首先尝试将两个文件（HTML&js文件）放在同一目录中，然后只使用不带路径的文件名：

<script type="text/javascript" src="somefile.js"></script>

这应该一直有效。然后，如果你想在不同的地方尝试一个文件，你应该使用相对路径。想象一下，你的文件是这样放在硬盘上的：

c:
  folder1
     subfolder1
        file.html 
     subfolder2
        somescript.js
  someother.js

然后，html对js文件的引用如下：

<script type="text/javascript" src="../subfolder2/somescript.js"></script>
<script type="text/javascript" src="../../someother.js"></script>

编辑：

客户端上的路径不能包含~符号。该符号应该由服务器端解析（即在<% %>标签内部）。

使用如上所述的安全相对路径，或者使用服务器端代码创建路径（请参阅其他问题：https://stackoverflow.com/a/697674/146513)

Javascript文件在客户端上读取和执行。

您需要使用客户端路径；浏览器将向该URL发送HTTP请求。

使用此

var sc=document.createElement('script');
sc.src="script.js";
document.getElementsByTagName('head')[0].appendChild(sc);

有些时候使用js这样的资源，css来自跨域浏览器安全不允许使用这个。

如果问题没有解决，我不确定，但这可能会帮助你

<script>
     window.domain = "YOUR_DOMAIN.COM";
</script>
方法1：在服务器上设置GET响应

如果您正在运行nodeexpress服务器，那么下面是如何做到的：

在HTML文件中：

<script type='module' src="test.js"></script>

在服务器端javascript文件中。您需要安装npm PATH模块，以便使用__dirname操作路径。你需要学习路径是如何工作的，这是一项非常重要的技能。

现在在服务器端，这是代码：

app.get('/test.js', (req,res)=> {
    res.sendFile(path.resolve(__dirname, '..', 'test.js'));
})

这是完整的代码：

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.resolve(__dirname, '..', 'public')));
app.get('/test.js', (req,res)=> {
    res.sendFile(path.resolve(__dirname, '..', 'test.js'));
})
const port = 1000;
app.listen(port, console.log(`listening on port: ${port}`));

方法2：使用快速静态能力（见上面的视频）

例如

app.use(express.static(path.resolve(__dirname, '..', 'public')));
app.use(express.static(path.resolve(__dirname, '..', 'jsFiles')));

或

app.use(express.static('foldername')

现在把你的JS文件放到这个文件夹里。这允许客户端在没有GET请求的情况下接收该文件夹中的静态文件。

在您的HTML文档中，只需假设JS文件在根目录中，它就会为您加载它：

<script type='module' src="test.js"></script>

方法3：将JS文件放在与HTML文件相同的文件夹中

或者，只需将JS文件放在与HTML文件相同的文件夹中即可。

在HTML文件中，使用以下代码：

 <script type='module' src="test.js"></script>

我在我的YouTube频道上制作了一个关于如何做到这一点的视频。

相关文章：