引入外部JS文件

最新推荐文章于 2023-08-02 16:00:33 发布

J_learner

最新推荐文章于 2023-08-02 16:00:33 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

分类专栏： Front End

本文链接：https://blog.youkuaiyun.com/J_learner/article/details/104733701

Front End 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在HTML中引入JavaScript文件，实现网页的动态效果。通过具体代码示例，展示了如何正确设置meta标签和script标签，确保网页的正常运行。深入探讨了不同类型的外部JS文件如何被正确引用，为前端开发者提供了实用的指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="firstPage.js"></script>
</head>

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

type：“text/javascript”
src：外部JS文件的存储路径

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

J_learner

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Js_引用外部JavaScript文件

宫廷渔夫

03-28

1405

外部js文件 test.js代码： document.write("欢迎浏览本页面"); 引入外部文件：

uniapp(vue3) - 微信小程序平台使用import引入外部js文件出现undefined，正常引入js文件(sdk插件)文件路径正确但console.log控制台打印时却是undefined

高级前端工程师

08-23

5047

uniapp在vue里面用import引入js文件,结果为undefined，uniappvue3.0 通过import引入外部js，vue3+ts import引入第三方js文件报错解决方法，uniapp引入第三方js插件，uniapp引用外部js_Uniapp怎么引入外部js，uniapp引用外部js报错undefined，uniapp 引入第三方js报错undefined，uniapp vue3.0 通过import引入外部js(sdk)文件undefined，uniapp(vue3) - 微信小程序

参与评论您还未登录，请先登录后发表或查看评论

JavaScript--引用JS外部文件

weixin_30641999的博客

07-21

276

通过前面知识学习，我们知道使用<script>标签在HTML文件中添加JavaScript代码，如图: JavaScript代码只能写在HTML文件中吗?当然不是，我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。注意:在JS文件中，不需要<script>标签...

JavaScript的外部文件的引用

shadowland_L的博客

12-03

1990

JavaScript学习记录： js.html引用外部文件myScript.js文件 ****注：外部js.html文件和myScript.js文件在同一文件目录下源文件： js.html代码： <!DOCTYPE html> <html> <body> <h2>外部 JavaScript</h2> <p id="demo">一个段落。</p> <button type="button"

js文件如何引用外部js

lengxue789的专栏

01-11

3832

js文件如何引用外部js document.write("<script src='http://192.168.106.31:8031/Public/Debug/Scripts/jquery.min.js' type='text/javascript'>");

js导入外部文件

weixin_30856965的博客

12-14

301

转载于:https://www.cnblogs.com/songyinan/p/6181387.html

vue组件内部引入外部js文件的方法

11-21

本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作DOM引入JS：这是最简单直接的方式，通过在`mounted`生命周期钩子中动态创建`<script>`标签并将其插入到DOM中。这种方法的代码如下： ```...

在html中引入外部js文件,并调用带参函数的方法

10-21

本篇文章将详细讲解如何在HTML中引入外部JS文件，并调用其中的带参数函数。首先，我们来看一下项目的基本结构。通常，HTML文件（如`test.html`）和JavaScript文件（如`a.js`）会放在同一个目录下，或者JavaScript...

引入外部js

csdt_csdt的专栏

01-17

991

//调用外部js文件 var num1 = window.prompt("第一个数"); var num2 = window.prompt("第二个数"); var operater = window.prompt("运算符"); num1 = parseFloat(num1); num2 = parseFloat(num2); window.alert('结果

从外部引入js文件

qq_38489451的博客

04-23

5667

一、在<head>标签中插入js文件路径 <head> // script 标签内src=“文件路径” <script src="文件路径"></script> </head> js文件格式代码内容写在大括号内 window.onload = function(){ //javascript代码内容写在大括号内 document.getElementById("demo").innerHTML = "HELLO."; } 二、在&l

引用外部js文件常见问题！

我不会爱上敲代码

12-11

1436

引入多个js文件的时候，记得注意引入先后顺序。CDN文件必须在前，其他文件在后。实例如下： script type="text/javascript" src="js/jquery-1.10.2.min.js">script> script type= "text/javascript" src= "js/ajaxfileupload.js" >script>

引入js文件的几种方式

qq_26747571的博客

12-15

1438

1. 页面中直接引用复制代码代码如下: 2.动态写入页面复制代码代码如下: document.write('') document.write('') 3.模拟包含函数复制代码代码如下: function include(path){ var a=document.createElement("script")

JS的引入文件

qq_59274685的博客

09-07

211

引入文件地址： https://www.jq22.com/jquery-info122 API文档： https://jquery.cuishifeng.cn/index.html

javaScript系列之导入外部文件(一)

dapyandxpy的博客

06-17

2135

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>   <script src=

javascript系列之引入文件方式

StayAlive1887的博客

08-02

1863

随着你越来越广泛的使用javascript，你可能会遇到这种情况：你在不同的网页中重复使用javascript代码。你不得不在多个html文件中维护相同的javascript代码。这时候，script标签提供一种机制，允许你在外部文件中保存javascript代码，然后使用script标签引入外部的javascript文件。使用外部的javascript文件，你需要将所有的javascript代码写入一个单独的文件中，并且这个文件的后缀名改为 “.js” ，然后在HTML文档中使用上面的方式引入。

js文件夹上传

最新发布

01-04

### 在 Vben Admin 中引入外部 JS 文件在现代前端开发框架中，如 Vben Admin 使用 Vue 3 和 Vite 构建的应用程序里，引入外部 JavaScript 文件可以通过多种方式实现。 #### 方法一：通过 `public` 目录引入静态资源如果希望在整个应用范围内使用某个外部 JavaScript 文件，可以将其放置于项目的 `public` 文件夹下。之后，在 HTML 文件中的 `<head>` 部分添加脚本标签来加载这个文件： ```html <script src="/your-script.js"></script> ``` 这种方式适用于那些不需要打包处理的纯静态资源[^1]。 #### 方法二：利用 Webpack 或者 Vite 的配置进行全局注册对于更复杂的场景，可能需要修改构建工具（Webpack/Vite）的相关配置以支持特定路径下的模块导入。例如，在 Vite 中可以在 `vite.config.ts` 文件内指定额外的 alias 别名映射规则以便更好地管理依赖关系： ```typescript import { defineConfig } from 'vite'; export default defineConfig({ resolve: { alias: [ // 添加自定义别名 { find: '@assets', replacement: '/src/assets' }, ], } }); ``` 接着就可以像下面这样轻松地从任何地方引用这些被别名化的路径所指向的内容了： ```javascript // 假设有一个位于 @assets/js/utils.js 的函数库 import * as utils from '@/assets/js/utils'; console.log(utils.someFunction()); ``` 这种方法不仅限于本地文件系统上的资源；也可以用于远程 URL 地址，只要确保网络请求能够成功获取目标文件即可[^2]。 #### 方法三：按需懒加载第三方库当不想让整个应用程序都受到某一段代码的影响时，可以选择仅在某些页面或组件内部有条件地执行异步加载操作。这通常涉及到动态 import() 表达式的运用以及配合路由守卫等功能一起工作： ```javascript const loadScript = async () => { const module = await import('https://example.com/path/to/external-lib'); }; loadScript(); ``` 上述例子展示了如何基于条件触发器去即时下载并运行来自互联网上公开托管的服务端提供的 .js 资源。