首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript如何在不同的文件夹中使用自己的JavaScript文件加载HTMP页面?为什么一直收到获取http://localhost:x/f.js 404 (未找到)的错误?

要在不同的文件夹中使用自己的JavaScript文件加载HTML页面,可以使用相对路径或绝对路径来引用JavaScript文件。

相对路径是相对于当前HTML文件所在的文件夹来引用JavaScript文件。如果你的HTML文件和JavaScript文件位于同一个文件夹中,可以直接使用相对路径引用,例如:

代码语言:txt
复制
<script src="yourScript.js"></script>

如果你的JavaScript文件位于当前HTML文件所在的文件夹的上一级文件夹,可以使用../来表示上一级文件夹,例如:

代码语言:txt
复制
<script src="../yourScript.js"></script>

依此类推,如果JavaScript文件位于更深层级的文件夹中,可以使用多个../来表示相对路径的层级关系。

另外,你还可以使用绝对路径来引用JavaScript文件。绝对路径是从网站根目录开始的完整路径,以/开头。例如,如果你的JavaScript文件位于网站根目录下的一个文件夹中,可以使用如下形式的绝对路径引用:

代码语言:txt
复制
<script src="/path/to/yourScript.js"></script>

如果一直收到获取http://localhost:x/f.js 404 (未找到)的错误,可能有以下几个原因:

  1. 路径错误:请确保你在HTML文件中正确地指定了JavaScript文件的路径。可以检查一下路径是否正确,并且确认JavaScript文件是否存在于指定的路径中。
  2. 服务器配置问题:如果你在使用服务器运行HTML页面,并且无法加载JavaScript文件,可能是服务器配置出现了问题。可以检查一下服务器配置文件,确认是否允许加载JavaScript文件。
  3. 文件权限问题:如果JavaScript文件所在的文件夹或文件没有足够的权限供浏览器读取,也会导致加载失败。可以检查一下文件或文件夹的权限设置,并确保浏览器能够读取该文件。

需要注意的是,由于要求答案中不能提及特定的云计算品牌商,所以无法给出腾讯云相关产品和产品介绍链接地址。希望以上内容对你有帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Next.js 14 初学者入门指南(上)

自动代码拆分:Next.js会自动将你JavaScript代码分割成更小、优化后包。这样做可以通过减少初始页面加载时需要加载代码量来提高性能。...通过简单地在代码库添加文件文件夹,你可以定义用户可以在浏览器访问URL路径。下面是几个关于Next.js路由学习场景,让我们更深入地了解如何在Next.js应用实现和管理路由。...创建404页面 在Next.js处理404错误页面是一个简单而直接过程,通过定义一个特定组件,你可以为用户提供一个更友好错误提示页面,而不是默认浏览器错误页面。...假设你有一些库文件或者一些只供内部使用组件,你不希望这些文件或组件被当作页面对外提供服务。你可以将这些文件放在一个前缀为下划线文件夹,比如_lib。...尽管我们创建了page.tsx文件,由于它位于_lib文件夹下,访问localhost:3000/_lib将会显示404错误,因为Next.js自动将_lib及其子文件夹从路由系统中排除了。

1.4K10
  • 前端性能优化

    客户端收到服务器重定向响应后,会根据响应头中Location地址再次发送请求。重定向会影响用户体验,尤其是多次重定向时,用户在一段时间内看不到任何内容,只看到浏览器进度条一直在刷新。...避免404错误 HTTP请求很昂贵,返回无效响应(404未找到)完全没必要,降低用户体验而且毫无益处。 一些网站设计很酷炫、有提示信息404页面,有助于提高用户体验,但还是浪费服务器资源。...使用PHPflush()函数,可以发送部分已经准备好 HTML到浏览器,以便服务器还在忙于处理剩余页面时,浏览器可以提前开始获取资源。...使用外部JavaScript和CSS 外部JavaScript和CSS文件可以被浏览器缓存,在不同页面间重用,也能降低页面大小。 当然,实际也需要考虑代码重用程度。...如果仅仅是某个页面使用代码,可以考虑内嵌在页面,减少HTTP请求数。另外,可以在首页加载完成以后,预先加载页面的资源。 3.

    2K41

    arkTS开发鸿蒙OS个人商城案例【2024最新 新年限定开发案例QAQ】

    在声明式描述语句中开发者除了使用系统组件外,还可以使用渲染控制语句来辅助UI构建,这些渲染控制语句包括控制组件是否显示条件渲染语句,基于数组数据快速生成组件循环渲染语句以及针对大数据量场景数据懒加载语句...Node采用一系列“非阻塞”库来支持事件循环方式。本质上就是为文件系统、数据库之类资源提供接口。向文件系统发送一个请求时,无需等待硬盘(寻址并检索文件),硬盘准备好时候非阻塞接口会通知Node。...不管是新手,还是专家,大家都围绕着项目,使用并贡献自己能力,致力于打造一个探索、支持、分享、听取建议乐土。 具备书写JavaScriptIDE,普通记事本也可以进行开发。.../components/gouwuche' import router from '@ohos.router' @Entry @Component struct NewApp_one { // 获取上一个页面传过来该登录用户名...try { const changeValue = req.body.changeValue; // 修正获取请求体参数方式 // 使用正则表达式进行模糊查询

    45710

    构建通用 React 和 Node 应用

    然后当我们切换视图时候,一切都在浏览器中发生:没有从服务器加载 HTML 代码, 只有被浏览器加载新资源 (如下示例 3 张新图片) : ?...余下代码都保存在 src 文件夹, 其中包含路由 (routes.js) 和渲染 (app-client.js 和 server.js) 所需主要文件。...数据模块 在一个真实应用,我们可能会使用 API 来获取应用所需数据。 在这个案例只有 5 个运动员及其相关信息很少数据, 所以可以简单点,把数据保存在 JavaScript 模块。...只是有一些错误警告... 如果你在首页之外部分刷新页面, 服务器会返回 404 错误。 解决这个问题方法有很多。我们会使用通用路由及渲染方案解决这个问题,所以让我们开始下一部分吧!...最后一种情况是,当路由不匹配时候,我们只是简单向浏览器返回一个 404 未找到错误

    8.8K70

    18个网站优化技巧

    当用户通过浏览器请求网页时,浏览器会读取服务器发送特定 HTML文件,如果请求页面包含了外部CSS和JavaScript文件,浏览器会再次发送独立请求来获取这些文件。...正如你想,这会延长页面加载时间。   使用Keep-Alive头可以一直保持连接,直到浏览器从服务器获取到所有与这个页面相关资源。...,收到404或410错误是比较失望。...错误请求会对网站页面加载速度产生不利影响。因此,建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接,清除它们,改善用户体验。   ...当一个网站一下子收到太多HTTP请求,它访客就会有响应时间延迟体验,这不仅增加了CPU使用率也增加了页面加载时间。那么,又该如何减少HTTP请求?

    1.7K80

    DVWA靶机练习之XSS

    简洁点来说,XSS 就是利用了网站对用户输入没有过滤完全漏洞,上传恶意代码到网站页面上,使得其他用户加载页面时执行攻击者恶意代码,达到窃取用户敏感信息( cookie)目的,根据种类不同,一般又分为...如果未找到任何结果,则该页面将显示她搜索字词,后跟“未找到”字样,其网址为 http://bobssite.org/search?...“未找到”,以及带有文本 “ xss” 错误消息。...它转到 Bob 网站进行搜索,未找到任何内容,并显示“未找到小狗”,但在这之间,脚本标签运行(在屏幕上不可见)并加载并运行 Mallory 程序 authstealer.js(触发 XSS 攻击),...(document.cookie); 可以看到,植入代码之后,脚本就存储在了页面,这是持久性,只要管理员没有发现,就会一直有人受害 中级 XSS(DOM) 中级案例对 <script

    1K20

    Nuxt.js实战:Vue.js服务器端渲染框架

    以下是Nuxt.js页面渲染详细步骤:初始化:用户在浏览器输入URL并发送请求到服务器。服务器接收到请求后,开始处理。...这些方法会在服务器端运行,用于从API或其他数据源获取数据。数据获取后,会被序列化并注入到页面模板。模板渲染:Nuxt.js 使用 Vue.js 渲染引擎将组件和预取数据转换为HTML字符串。...客户端初始化:浏览器接收到HTML后,开始解析和执行内联JavaScript。Nuxt.js客户端库(nuxt.js)被加载并初始化。...缓存策略:利用HTTP缓存策略,ETag、Last-Modified,减少重复请求。Vue.js优化:确保Vue组件优化,避免无用watcher、使用v-once减少重新渲染等。...路由守卫: 使用 beforeRouteEnter 等路由守卫,避免在不需要时加载数据。减少HTTP请求: 合并多个CSS和JS文件,减少HTTP请求数量。

    21500

    懂个锤子Vue VueRouter路由深入浅出

    构建导航和页面切换复杂性;单页面应用程序 SPA单页面应用程序SPA,Single Page Application: 在用户首次访问时加载整个应用程序或核心资源,之后页面切换通过JavaScript...HTML页面,用户导航到新页面时,浏览器会发起新HTTP请求,加载完整HTML文档及相关CSS、JavaScript等资源;用户体验: 页面切换涉及完整页面刷新,可能会感觉较慢,因为:每个页面都是独立加载...,即前端路由技术,它处理是用户在:单页面应用程序SPA导航;Vue Router允许开发者定义不同URL路径,并将这些路径与特定Vue组件关联起来:当用户导航到一个新URL时,不是加载整个新页面....x 、Vue3-VueRouter4.x-Vuex4.x创建对应路由组件本案例以:网易云网站,举例: 在src/views/定义路由组件.vue 文件 为了规范代码通常在:src/views文件夹定义...Vue路由—模式设置Vue Router 提供了两种路由模式来管理应用URL行为: hash模式 `history模式`Hash模式: 默认 在URL中使用#来标记路由变化,http://localhost

    7610

    HTTP协议概述

    HTTP与TCP/IP区别 TCP/IP协议是传输层协议,主要解决数据如何在网络传输,而HTTP是应用层协议,主要解决如何包装数据。...,200 则代表服务器正常响应,404 则代表页面未找到,500 则代表服务器内部发生错误。...400 错误请求 服务器无法解析该请求。 401 未授权 请求没有进行身份验证或验证未通过。 403 禁止访问 服务器拒绝此请求。 404 未找到 服务器找不到请求网页。...Content-Type,文档类型,指定了返回数据类型是什么,text/html 则代表返回 HTML 文档,application/x-javascript 则代表返回 JavaScript 文件...Expires,指定 Response 过期时间,使用它可以控制代理服务器或浏览器将内容更新到缓存,如果再次访问时,直接从缓存中加载,降低服务器负载,缩短加载时间。

    1.4K30

    浅析YSlow-23条规则

    只不过,由于浏览器使用太过频繁,目前主流浏览器都使用自己独有的缓存,而不使用操作系统缓存。 不同浏览器在缓存DNS问题上也不尽相同(主要体现在时间上面)。...凡是访问地址,没有带文件名后缀(例如aspx,asp等等),服务器都会尝试解析为一个文件夹,自动加上一个路径斜线,然后再查找内部默认页面。...如果数据量大,可以考虑分页,或者按需加载 18、避免404 why 什么情况下会发生404错误404 意味着Not Found,意思是说未找到资源。...尤其是如果请求一个不存在脚本文件,因为浏览器在请求脚本文件时候,即便是返回404,它也会尝试去按照Javascript方式解析响应内容。...看得到影响: 如果用户请求某个页面不存在,那么他将收到明确回应 默认情况下,他将收到一个标准错误页面(请注意:不少用户会被这个页面吓到) how 避免404错误发生措施: 为网站提供favicon.ico

    1.9K81

    浅析YSlow-23条规则

    只不过,由于浏览器使用太过频繁,目前主流浏览器都使用自己独有的缓存,而不使用操作系统缓存。 不同浏览器在缓存DNS问题上也不尽相同(主要体现在时间上面)。...凡是访问地址,没有带文件名后缀(例如aspx,asp等等),服务器都会尝试解析为一个文件夹,自动加上一个路径斜线,然后再查找内部默认页面。...如果数据量大,可以考虑分页,或者按需加载 18、避免404 ? why 什么情况下会发生404错误404 意味着Not Found,意思是说未找到资源。...尤其是如果请求一个不存在脚本文件,因为浏览器在请求脚本文件时候,即便是返回404,它也会尝试去按照Javascript方式解析响应内容。...看得到影响: 如果用户请求某个页面不存在,那么他将收到明确回应 默认情况下,他将收到一个标准错误页面(请注意:不少用户会被这个页面吓到) how 避免404错误发生措施: 为网站提供favicon.ico

    1.3K30

    一文讲懂Nginx常用配置及和基本功能

    Nginx常用配置3.1 配置文件结构Nginx配置文件是文本文件,通常位于/etc/nginx/目录下。配置文件由一系列指令组成,每条指令都有自己语法格式和作用。...} error_page 404 /404.html; # 指定404错误页面 location /404.html { internal...http.include:加载mime.types文件。该文件包含了多种MIME类型及其对应文件扩展名。http.default_type:默认MIME类型。...当客户端没有提供Accept头部或者请求文件类型在mime.types文件未找到时,将使用该类型作为默认类型。...error_page:指定错误页面,常用选项有404文件未找到)、500(服务器内部错误)等。location.internal:禁止外部直接访问此页面。4.

    1.3K10

    Linux 配置 Nginx 服务完整详细版

    location /images/ { alias /var/www/images/; # 图像文件目录 } # 自定义错误页面error_page 404...这个默认页面被称为索引文件,它是网站第一个展示给访问者页面。静态文件目录静态文件目录是一个包含网站静态文件(不需要服务器端处理文件文件夹或目录。...图像文件目录通常用于组织和管理网站图像资源,使其能够在网页上展示或通过链接提供给用户。# 自定义错误页面这个配置告诉Nginx当发生404错误时,将用户重定向到/404.html页面。...例如,如果你后端服务器地址是http://localhost:8000,那么这里应该写成 proxy_pass http://localhost:8000;。...这意味着一旦浏览器接收到这个HSTS标头,它将在一年内记住你网站,并强制使用HTTPS连接访问。

    1.9K21

    vue.cli项目封装全局axios,封装请求,封装公共api和调用请求全过程

    文件 三、封装axios实例 —— request.js 四、封装请求——http.js 五、正式封装API,用于发送请求——api.js 六、如何在vue文件调用 结语 前言 在做vue中大型项目的时候...,特在页面单独回复一下!...config.headers = { 'Content-Type':'application/x-www-form-urlencoded' }请求头内容配置,也是不同,application/x-www-form-urlencoded...四、封装请求——http.js 在项目src目录下utils文件夹中新建 http.js文件,这个文件是主要书写几种请求封装过程。...补充: 关于代理配置及若出现配置代理报错404问题,可以参考我文章:代理配置来解决; vue3学习:vue3.0如何使用router路由、vuex、element-plus 发布者:全栈程序员栈长

    3.2K10

    GitHub页面基本知识

    GitHub特性,发布,或移动到一个不同托管服务,更好满足您需要。...提示:如果您在启用后从主分支删除/docs文件夹,那么您站点将不会构建,您将会为一个缺失/docs文件夹获取一个页面构建错误消息。...定制404s只有在使用自定义域时才会起作用。否则,将使用用户页404使用命令行创建项目页面。 如果您熟悉命令行Git,那么手动创建项目页面站点是很容易。...解决混合内容问题 如果您为自己网站启用了HTTPS,而且您网站HTML仍然通过HTTP引用图片,CSS或JavaScript,那么您网站将提供混合内容,并且您可能在加载资源时遇到问题。...如何在HTML文件引用资产示例 资产类型 HTTP HTTPS CSS

    1.5K30

    何在 ASP.NET MVC 中集成 AngularJS(1)

    较少文件意味着更少 HTTP 请求,这也可以提高第一个页面加载性能。.../ProductInquiry 目录结构与配置 按照惯例,一个 MVC 项目模板要求所有的 Razor 视图驻留在视图文件夹; 所有的 JavaScript 文件驻留在脚本文件夹; 所有的内容文件驻留在内容文件夹...基于 Web 应用程序会变得非常大,我不想相关功能以整个应用程序目录结构存储在不同文件夹。 ?...每次应用程序运行时候,我想获得最新版本应用程序和使用版本号,以实现最新 HTML 文件JavaScript 文件生成时,帮助浏览器从缓存获取最新文件来替换那些旧文件。...,将会收到一个 Angular 错误

    7.6K60

    深入浅出webpack学习1--使用DevServer

    使用DevServer 在日常开发,我们可能需要以下几个功能: 1. 提供HTTP服务而不是使用本地文件预览; 2. 监听文件变化并自动刷新网页, 做到实时预览; 3....启动HTTP服务监听在http://localhost:8080/, DevServer启动后会一直驻留在后台保持运行,访问这个网址就能获取项目根目录下index.html。...用浏览器打开这个地址会发现页面空白错误原因是./dist/bundle.js加载404。...同时你会发现并没有文件输出到dist目录,因为DevServer会把webpack构建出文件保存在内存,在要访问输出文件时,必须通过http服务访问。...由于DevServer不会理会webpack.config.js里配置output.path属性,所以要获取bundle.js正确URL是http://localhost:8080/bundle.js

    98120

    vue两种路由模式

    为什么在开发环境下,使用history模式时候刷新都不报错,而打包成静态文件上线后,打开项目空白页面(这个大多数是在配置文件配置:publicPath: '....而hash模式不一样不管在开发还是打包成dist静态文件后,都不会报404,比如直接找打包后dist文件里面的index.html打开访问,然后刷新都不会报404,因为刷新只会带#号前面的url进行查找...application/x-httpd-php image/jpeg image/gif image/png; # 是否在http header添加Vary: Accept-Encoding...application/x-httpd-php image/jpeg image/gif image/png; # 是否在http header添加Vary: Accept-Encoding...区别 共同点:都可通过改变路由(地址栏)而不刷新页面 不同点: 显示问题,hash会在地址栏上带#号,而history不会 history可以通过pushState可以添加任意类型数据和title到记录

    2.1K10
    领券