动态加载js文件，注意script标签使用

最新推荐文章于 2025-06-25 11:06:15 发布
最新推荐文章于 2025-06-25 11:06:15 发布
阅读量2.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 软件问题总结 文章标签： 软件测试 软件开发 script标签 动态加载js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/white_hats/article/details/88886464
本文纠正了常见动态加载JS文件的错误做法，并提供正确示例。强调HTML标签配对原则及script标签不可嵌套。

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

最近碰到一个动态加载js文件的问题，对网上有一些错误的回答，我这里修改并记录。

 

1. 一般情况下，一个HTML文件或者JSP文件引用外部JS的文件，我们都直接静态加载的方式，例如：

 

2. 但是在另一种方式下，例如拼接JS文件地址，就需要去动态加载JS文件，很多人使用document.write方式加载

    以下错误的方式，我看到网上好多示例都这样写，误人呐！！！

      <script>
               document.write("<script language=javascript src=statics/js//public.js></script>");
      </script>  

   正确的写法

      <script>
              document.write("<scr"+"ipt language=javascript src=statics/js/public.js></scr"+"ipt>");
     </script> 

3.原因

HTML里的标签都是前后对应，有开始必有结束，例如“<html></html>”,"<div></div>"，"<head></head>"等，这里的script也一样，而且script不能出现嵌套，出现嵌套会错误以一对一的方式匹配，看图示：

 

 

 

 

动态加载script文件的两种方法
12-09
动态加载script到页面大约有俩方法 第一种就是利用ajax方式，把script文件代码从后台加载到前台，然后对加载到的内容通过eval()执行代码。第二种是，动态创建一个script标签，设置其src属性，通过把script标签插入到页面head来加载js，相当于在head中写了一个[removed][removed],只不过这个script标签是用js动态创建的 比如说是我们要动态地加载一个callbakc.js，我们就需要这样一个script标签： 代码如下: [removed][removed]
动态加载SCRIPT文件
阿信的专栏
11-09 3527
 往往有些时候，我们需要动态地加载SCRIPT文件，而不直接在网页中进行引用，这样使网页下载速度更快些。动态加载脚本文件一般来说有两种方法，一种是动态创建SCRIPT元素，一种是使用XMLHTTP访问后进行eval，这里我重点介绍前者，前者的兼容  //// Copyright(C) 2006 Forbes Pu. All right reserved.//var BROWSE
js(javaScript)脚本加载
最新发布
weixin_40325455的博客
06-25 482
特性没有属性asyncdefer下载是否阻塞 HTML 解析是否否执行是否阻塞 HTML 解析是是（下载完立即执行）否（HTML 解析完才执行）执行时机HTML 解析到脚本时立即执行下载完成后立即执行HTML 全部解析完成后执行（DOMContentLoaded 前）执行顺序按文档顺序不确定（下载完就执行）按文档顺序适用场景依赖 DOM 或其他脚本、需要顺序执行的脚本独立脚本、不依赖 DOM 或其他脚本依赖 DOM 或其他脚本、需要顺序执行的脚本。
动态加载script
sixwinds的专栏
05-26 1418
  原帖http://unixpapa.com/js/dyna.html 方法一：最普遍的方法就是通过ajax把包含script代码从后台加载到前台，然后通过eval()去执行这段代码。方法二：动态的创建一个script标签，设置src属性，通过把这个script插入到head中来加载js代码。相当于在head中写了一个,只不
动态加载script文件
jdrunk的博客
03-30 866
方法一(不建议使用)： document.write(<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"><\/script>) document.write('<script>new VConsole()<\/script>'); 当脚本中存在以 document.write 的方式向页面内写入内容时，各浏览器对于执行各个线程的顺序可能不一致 此现象造成在各浏览器里，某
如何动态加载外部Javascript文件
10-23
在这篇文章中，作者提供了一个名为JsLoader.js的JavaScript文件，用于实现动态加载的功能。这个文件定义了一个MiniSite对象，其中包含了Browser和JsLoader两个属性。Browser用于检测当前浏览器的类型，而JsLoader则...
使用jquery动态加载js文件的方法
10-25
例如，加载JavaScript文件和CSS文件的方法是不同的，前者使用`<script>`标签，后者使用`<link>`标签。 6. 具体代码实现。在给出的代码示例中，定义了`include`方法，该方法接受文件名或文件名数组作为参数，通过...
javascript中动态加载js文件多种解决办法总结
10-26
在开发过程中，有时我们可能需要在运行时动态加载JavaScript文件，以提高页面性能或根据用户需求加载特定的脚本。本文将详细介绍几种在JavaScript中动态加载JS文件的方法。 1. **利用`document.write`** 这是最...
js加载之使用DOM方法动态加载Javascript文件
01-19
传统上，加载Javascript文件都是使用[removed]标签。 就像下面这样： [removed][removed] [removed]标签很方便，只要加入网页，浏览器就会读取并运行。但是，它存在一些严重的缺陷。 （1）严格的读取顺序。由于...
JavaScript网页实例：在网页里动态加载JavaScript
请叫我二狗哥
11-21 1414
把一些逻辑独立的JavaScript脚本文件单独加载，是一种常见的JavaScript动态加载技术。这样做的好处有很多，比如可以减少不必要的JavaScript脚本文件的加载，以提高网页浏览速度。补充代码，要求用户在网页中点击【动态加载】按钮后，为html代码内需要加载的新增script脚本，脚本路径为./myjs.js，并要求文档加载完毕后再执行脚本。相关知识点：appendChild()、defer。
通过js脚本实现动态添加HTML标签
11-23
一个简单的JS操作可以点击增加HTML标签
动态加载JS脚本的4种方法.doc
03-31
动态加载JS脚本的动态加载JS脚本的动态加载JS动态加载JS脚本的4种方法.doc方法.doc
写一个方法动态同步加载script文件
王铁柱666的博客
04-20 299
例如，你可以将上述方法修改为返回一个 Promise，然后在 Promise 的。然而，需要强调的是，动态同步加载脚本通常不是一个好的实践，因为它可能会导致页面性能下降和用户体验变差。如果你确实需要同步加载脚本，并且了解其中的风险和限制，那么上述方法可以作为一个起点进行尝试。但请务必谨慎使用，并测试以确保它符合你的具体需求和期望的行为。文件通常不是推荐的做法，因为它会阻塞页面的渲染和执行其他脚本。需要注意的是，尽管上述方法尝试通过轮询来等待脚本加载完成，但实际上在浏览器中，脚本的加载和执行仍然是异步的。
js 动态加载 script 脚本
web相关
04-23 966
js 动态加载 script 脚本
js动态加载script脚本
qq_35972609的博客
09-02 4270
js动态加载script脚本 // 动态加载script资源 function loadScript(url, cb) { const script = document.createElement('script'); script.type = 'text/javascript'; if(script.readyState) { // IE浏览器 script.onreadystatechange = function() { if (s
动态加载script 加载完成回调事件
TigerZH
02-27 6906
序言 网页中有很多的第三方插件都是通过直接引入script库的方式进行加载，由于加载脚本需要时间，如果script还没有加载完成，便使用库中的对象就会有错误。 解决方案 获取script DOM 对象 绑定onload事件异步回调 总体的思路是这样子 asyncComplete() { return new Promise((reject, resole) =&gt; { ...
JavaScript技巧：动态加载脚本的方法
ByteZenith的博客
10-04 327
在JavaScript中，动态加载脚本是一种常见的技术，它允许我们在运行时异步地加载外部脚本文件。这对于优化网页性能、延迟加载和按需加载脚本非常有用。在本文中，我将介绍几种常见的动态加载脚本的方法，并提供相应的源代码示例。这些方法提供了灵活的方式来动态加载脚本文件。你可以根据自己的需求选择适合的方法。无论你选择哪种方法，动态加载脚本都是一种优化网页性能和提高用户体验的有用技术。这是一种基本的动态加载脚本的方法，它使用了DOM操作。另一种常见的方法是通过监听动态创建的。方法二：使用动态创建的。
javascript 动态添加
羽下佳人的博客
01-14 979
一、动态加载js函数封装标准方法： functionloadScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState){ // IE script....
动态加载JavaScript文件以优化ExtJS性能
下面是一段简单的示例代码，展示了如何使用动态创建`<script>`标签的方法来加载JavaScript文件。 ```html <!DOCTYPE html> 动态加载JavaScript示例 <script type="text/javascript"> // 动态加载JavaScript...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值