开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 外部引用不起作用

当在 JavaScript 中进行外部引用但不起作用时，可能的原因及解决方法如下：

基础概念： JavaScript 外部引用是指在一个 HTML 文件中通过 <script> 标签引入外部的 .js 文件，以复用代码和保持结构清晰。

可能的原因：

路径错误：引用的文件路径不正确，导致浏览器无法找到该文件。
- 相对路径：确保相对路径的书写正确，根据当前文件的位置来确定相对路径的方向和层级。
- 绝对路径：如果是绝对路径，要确保服务器上存在该文件且路径准确。

文件加载顺序：如果被引用的外部脚本依赖于页面上其他脚本或元素，加载顺序不正确可能导致问题。
浏览器缓存：浏览器可能缓存了旧版本的脚本文件，导致新的修改没有生效。
脚本错误：被引用的外部脚本本身存在语法错误或其他问题，导致无法正常执行。

解决方法：

检查路径：仔细确认引用的路径是否正确，可以通过在浏览器中直接访问该路径来验证文件是否存在。
调整加载顺序：确保依赖的脚本在前面加载。
清除缓存：可以通过强制刷新页面（通常是按下 Ctrl + F5）来清除浏览器缓存。
检查脚本错误：使用浏览器的开发者工具（通常按 F12 打开）查看控制台，检查是否有脚本错误信息，并进行相应的修改。

示例代码：假设我们有一个 main.js 文件和一个 utils.js 文件，要在 main.js 中引用 utils.js 。

utils.js 内容：

function sayHello() {
    console.log("Hello from utils.js");
}

main.js 内容：

sayHello();

HTML 文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="utils.js"></script>
    <script src="main.js"></script>
</head>

<body>

</body>

</html>

如果上述代码不起作用，先检查文件路径是否正确，然后查看浏览器控制台是否有错误提示。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue如何引用外部js_引入外部js文件

/xxx.js"> // 暴力引入缺点：不使用该js插件的组件也会加载，而我只想在某个Vue组件中使用该js插件。.../js/xxx.js' //注意路径缺点：下载的静态文件才可以方式三在Vue组件加载完后，手动操作DOM插入js插件。...将方式三包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。...可以动态替换要加载的js文件。包装一个importJs.js 插件。...// 导入外部js import Vue from 'vue' Vue.component('remote-script', { render: function (createElement)

13.1K5 0

vue 项目引用（外部） js、css

引入 js : import "../../...../static/home/jquery-2.1.1.min.js"; import "../../...../static/home/bootstrap.min.js"; import "../../...../static/home/jquery.easing.min.js"; import "../../...../static/home/hoverifyBootnav.js"; import "../../../static/home/init.js";

5.8K1 0

动态调用js文件、外部js文件时，alert起作用 document.write不起作用

问题代码： function test(){ var script=document.createElement('script'); script.src='js/write.js'; var dd=...document.getElementById('dd'); dd.appendChild(script); } 通过test函数调用write.js文件内容主要是document.write('**...****************'),页面并无内容输出如果write.js里面是alert内容则会弹窗！...现在是页面已经加载进来了，所以我认为点击后，加载进来的js，执行document.write，那么文本的输出浏览器不处理，而不是像加载时输出在当前元素里面。...解决代码那个write.js可以这样改： function test2(){ var dd=document.getElementById('dd'); dd.innerHTML = dd.innerHTML

4.7K1 0

如何引用外部cdn资源

在使用vue-cli进行项目构建时,有时是需要引用外部cdn资源的,生产环境中可以直接在index.html的头部引用,但是编译时会报错,因为脚手架无法识别这个外部资源.下面以引用腾讯地图api为例,介绍如何正确引用外部...cdn资源. # 引用 js?...externals: { 'qq': 'qq' } } 1 2 3 4 5 6 复制 # 使用 import qq from 'qq' 1 复制说明:其实第一步的引入并不是唯一的办法,还可以通过js

2.1K1 0

Springboot引用外部配置文件

（上边的大写D好像可以不写的）后来想着直接把spring.config.location写到application.properties配置文件中，然后指定一个固定的外部配置文件来获取信息，这样启动的时候就可以不用加最后一行了...这里说了四种方式可以把配置文件放到外部的。...由于我们是要从外部读取文件，所以直接说前两种。

1K3 1

Java引用外部字体（路径引用）的一些坑

（后面你会发现更加反程序员）那么，只能把字体放到哦静态文件里面，然后引用外部字体了。...于是，只能引用外部字体。坑二前头说了，是otf文件，用正确的代码跑一下，很好一个报错都没有！（此处应有掌声！）...嗯，我只能说这个引用外部的otf在百度上，根本没有任何解决方法。甚至问这个问题的人，答案也是叫我们在操作系统安装，本地引用。然后，谷歌，stackflow。...大神直接fxxk了一下java的awt，大意就是java说支持引用otf，但是，不支持外部引用otf，最后说了一句awt写的就是一坨翔。...我那个纠结啊，也就是说外部引用，路径引用代码没错，而且看了源码，外部引用也就是路径引用。也就是说需求给的ttf有问题，反映一下问题，需求说你想要怎样的ttf呢？鬼子知道啊？我也想知道啊！

2.7K1 0

js如何引用js脚本

如何在 JavaScript 中引用 JS 脚本在 JavaScript 中引用外部 JS 脚本有两种主要方法：使用标签这是最简单的方法，通过在 HTML 页面中插入... 标签来引用 JS 脚本：其中 src 属性指定要引用的脚本文件的路径。...动态创建并插入元素： const script = document.createElement("script"); script.src = "script.js... 避免在同一页面中多次引用相同的脚本。使用异步或延迟加载来防止脚本阻塞页面加载。本文共 154 个字数,平均阅读时长 ≈ 1分钟

1051 0

Vue.js – 引入外部 JS 文件

一、外部文件 config.js 第一种写法： // 常量的定义 const config = { baseurl:'http://172.16.114.5:8088/MGT2' } // 函数的定义...//172.16.114.5:8088/MGT2' } // 函数的定义 export function formatXml(text) { 　　return text } 二、引入 config.js

41.4K3 1

vue.js引入外部CSS样式和外部JS文件的方法

学习Vue.js动画时，需要引入一个animate.css，如何全局引入外部文件呢？一.引入外部CSS样式文件 1. 在app.vue中下直接引入对应的路径 ?...@import改成引入外部样式 ? image 二. 引入外部JS文件 1....Velocity函数，那么要在Velocity加密算法的js脚本的最后，使用如下代码，将Velocity函数导出： export { Velocity } 注：外部脚本js不要放在components...可以在src文件夹下新建一个js文件夹，然后将外部js脚本放在这个文件夹下，然后就可以在其他Vue组件中引入该js脚本。...3.在组件中使用import { 函数名 } from 外部脚本名来从外部js脚本中导入我们需要使用的函数。 import { Velocity } from '..

14.7K1 0

快速学习-Spring(引用外部属性文件)

IOC容器和Bean的配置 2.9 引用外部属性文件当bean的配置信息逐渐增多时，查找和修改一些bean的配置信息就变得愈加困难。...这时可以将一部分信息提取到bean配置文件的外部，以properties格式的属性文件保存起来，同时在bean的配置文件中引用properties属性文件中的内容，从而实现一部分属性值在发生变化时仅修改...jdbc:mysql:///test"/> 2.9.2 使用外部的属性文件

7512 0

js 外部调用嵌套函数

在函外部直接调用函数的内部函数是不可以的，因为是向外查找的所以不能直接内部函数 function one() { function two() {...var b = 30; } } one(); two(); 即使先调用外部函数也不可以找不到函数如果要直接调用内部函数可以把函数赋值给一个全局变量...将内部函数值赋给外部定义的全局变量 //定义一个变量名 var b = 20; var a; function one() {...console.log(b); } a = two console.log(b); } //先调用外部函数...30; console.log(b); } console.log(b); } //先调用外部函数

10.5K2 0

js 判断循环引用

(obj3)); console.log(isLoop(obj4)); console.log(isLoop(obj5)); console.log(isLoop(obj6)); 这里我看了JONS-js...typeof obj[key] === 'object') { if(cwm.has(obj[key])) { // 如果同层级的互相引用了...if(typeof obj[key] === 'object') { if(wm.has(obj[key])) { // 如果循环引用了

18.8K1 0

Java小白翻身教程-如何引用外部类

上一节：Java小白翻身教程-包的作用现在StringUtil已经写好了，我们希望在Demo里面引用它，有两种方法。...步骤 5 导入包上面讲了用全限定名的方式引用外部类，这样毕竟有点麻烦，如果类的全限定名很长，比如来个com.aaa.bbb.ccc，就太不协调了，也不好看。

5852 0

vue文件中引入外部js

1.在项目的入口文件中(app.js)定义remoteScript标签 Vue.component('remote-script', { render: function (createElement...{ src: { type: String, required: true } } }); 2.在所需要的引入外部...js的页面使用 src位置的地址里面填要引入js文件的地址即可

23K3 0

Feed2JS实现JS的外部调用

Feed2JS实现JS的外部调用作者：matrix 被围观: 4,064 次发布时间：2011-04-30 分类：兼容并蓄 | 无评论 » 这是一个创建于 4142 天前的主题，其中的信息可能已经有所发展或是发生改变...feed2js顾名思义就是将feed内容以js方式输出，便于嵌入页面中，做成文章列表。不单适用于Wordpress，任何博客程序以及免费博客甚至网站，只要支持RSS Feed就可以适用。...网址：http://feed2js.org/index.php?s=build 在页面中URL地址栏输入RSS Feed地址，再在下面选项中进行一些设置。...display设置显示条数中文内容会出现乱码选上UTF-8 Character Encoding即可点页面右边的Preview Feed可以预览效果，Generate JavasScript生成JS...我的设置： http://feed2js.org/index.php?

2.4K1 0

3D开发是一个生态，ThingJS支持js,css,json,html外部资源引用

从开发生态的角度，webGL技术可以调用显卡、调用麦克风、调用摄像头等一切能用的硬件去提升服务质量，同时也支持引用js脚本和css演示，让你的3D开发效果更加有特色。 **官方如何引入外部资源呢？...** 我们默认js脚本和css样式会带上时间戳，且按urls数组中的顺序加载，浏览器会缓存之前的js，css的版本，我们更新了js，css文件后，浏览器不会更新。.../bootstrap.min.js', '/static/vendor/moment/moment.js'], function () { twitter-bootstrap, moment均为外部资源...这样在平台上引用，开发不因为访问不到资源或者访问报错而拖延，所以我们支持css库，JS库打包并提供官方文件夹储存资源，确保稳定，也方便用户无论何时何地都可开发。...ThingJS官方平台支持外部资源，可操作js, css文件新建或者icon、jpg、png、gif、js、css、html、json、ttf、woff、gltf、rvt、ifc、mp3格式的文件上传。

1.5K2 0

js如何引用同级元素

具体效果示例效果 https://coder.itclan.cn/fontend/js/17-yinyong-tongji-elem/ 具体描述在网页中,同级(兄弟)元素,指的是拥有相同的直接父级元素的元素...并且往往指的是同类的元素,同类元素在实际开发中遇到的比较多比如:列表li,并列的按钮等,当需要做一些特殊的效果时,可以对其他同级的元素进行一些操作,满足特定的网页要求比如:隔行填充颜色等原生方法实现以下是通过原生js...就是同级元素,同级元素拥有相同的父级元素都是p,那么就可以得到除自身以外的的同级元素,如果还需要排除同一类别的话,那么可以使用节点的nodeType属性来加以区别 Vue版本实现在Vue里面,就不用类似原生js...margin: 20px 0; } .content { padding: 20px 0 0 0; } 从上面可以看出,使用Vue实现类似同样的效果,就几行代码,相比原生js...实现是比较简单的,但是原生js的操作依旧还是要知道的

7.9K4 0

httprunner学习6-参数化(引用外部csv数据)

user_id 1001 1002 ... 1999 2000 然后在 YAML/JSON 测试用例文件中，就可以通过内置的 parameterize（可简写为 P）函数引用 CSV 文件。...user_name.csv文件测试数据 user test1 test2 test3 test4 user_name.csv文件和test_param_csv.yml文件放到同一目录，引用csv文件语法

1.3K2 0

html当中如何引用js文件

3）html当中如何引用js文件如果需要javascript工程师和html美工各干各的工作，需要分开写文件。...例 1.2 js"> ... Hello.js（如果你用notepad建立一个txt之后你再改为js，一定在存时，要存成utf-8或unicode格式）: var a ; /*before you

10.1K0 0

js引用传递和值传递

但是通过值传递的项本身就是一个引用。从技术上讲，这叫做call_by_sharing。实际上，这意味着如果更改参数本身（如num和obj2），则不会影响传入参数的项。

7.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭