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

【问题标题】：add .js file as source in html file from server在服务器的 html 文件中添加 .js 文件作为源
【发布时间】：2012-04-15 06:06: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 文件。如果我手动运行该文件，一切正常

【问题讨论】：

它可能只是因为您没有关闭“text/JavaScript”周围的引号而无法正常工作吗？
只需将您的js 文件从solution explorer 拖入head tag，Asp.net 将自行设置正确的路径。

标签： c# javascript asp.net

【解决方案1】：

这是有关如何操作的视频：https://youtu.be/ITX6s8PpV8I

查看有关如何操作的视频：https://youtu.be/ITX6s8PpV8I

方法 1：在服务器上设置 GET 响应

如果您正在运行节点快递服务器，那么这里是如何做到的：

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

观看视频了解如何操作：https://youtu.be/ITX6s8PpV8I

【讨论】：

【解决方案2】：

我猜问题可能是你不知道如何创建 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）

【讨论】：

我编辑了上面的帖子以获得更好的理解......我想这不是路径的问题。问题出在其他地方，我找不到。请回复

【解决方案3】：

使用这个

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

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

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

<script>
     window.domain = "YOUR_DOMAIN.COM";
</script>

【讨论】：

【解决方案4】：

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

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

【讨论】：

我编辑了上面的帖子以获得更好的理解。请回复