动态加载JS后执行后续文件

最新推荐文章于 2024-03-21 21:27:13 发布
最新推荐文章于 2024-03-21 21:27:13 发布
阅读量880 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44135607/article/details/118760961
版权

在正常的加载过程中，js的加载都是同步的，也就是在加载过程中，浏览器会阻塞接下来的内容的加载。

但有时候我们需要加载完JS后，执行某个函数。这时候我们就要用到动态加载，动态加载是异步的，如果我们在后边要用到这个动态加载的js文件里的东西，就要保证这个文件加载完成后，再执行下面的内容。

如何判断js是否加载完成？（实现loadScript(url,callback)异步加载脚本，完成后执行回调函数，要求支持IE）

我们使用document的readyState属性：document.readyState
　readyState 属性返回当前文档的状态。
　该属性返回以下值:
　　　uninitialized - 还未开始载入
　　　loading - 载入中
　　　interactive - 已加载，文档与用户可以开始交互
　　　complete - 载入完成 (loaded)

执行函数代码：

function loadScript(url,callback){
   
    //如果有该JS，则移出该JS
    document.getElementById('') && document.getElementById(''
最低0.47元/天 解锁文章
暮茗尘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
10-18
主要介绍了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法,涉及javascript动态创建页面元素、事件监听、回调函数使用等相关操作技巧,需要的朋友可以参考下
javascript开发随笔二 动态加载js和文件
10-28
回调函数在文件加载完成后被调用，此时可以进行后续处理，比如标记该组件已经加载过，防止重复加载。此外，为了实现组件的按需卸载，`bus.removeUi`函数被用来移除已加载的JS和CSS文件，通过删除对应的`<script>`和`...
js异步加载
weixin_34268579的博客
11-18 101
加载顺序是怎样的？ 动态的和静态的都加载完之后才执行ready 还是只有静态的加载完之后就执行了？ 页面加载完成之后是指什么才是完全加载完？ 什么是并行，什么是异步 脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。 文档加载？DOM加载 async属性是HTML5新增的。作用和defer类似，即允许在下载脚本的同时进行DOM的渲染。但是它将在下载后尽快...
JS 的异步加载方法: async、defer、动态加载
最新发布
cherry__yu的博客
03-21 388
相同点：都不会阻塞后续元素渲染，都会立刻加载。都只适用于外部脚本。 不同点：async 脚本加载完后会立刻执行，defer 的会在文档元素加载完后，DOMContentLoaded事件前执行。所以需要对DOM元素进行操作的脚本就不应该用async，因为元素可能没加载出来。
动态 加载和执行js文件
dxj124的博客
11-27 550
也可以参考：https://blog.csdn.net/WeilaPls/article/details/84712521   （多种识别移动端的方式）  页面加载先判断设备，是pc还是移动，然后动态加载相应的js文件。以下有两个方法： 方法一： function is_pc(){ var os = new Array("Android","iPhone","Win...
动态加载JS文件并执行
ZYallers
01-12 641
eg: $.ajax({ type: "GET", url: "test.js", dataType: "script" }); 原文地址：http://blog.csdn.net/lee576/article/details/4295096#
动态加载Js文件的三种方法
06-09 258
碰到需要加载多个Js文件的情况，使用选择性的动态加载Js ，可以提高页面显示的速度和效率。下面介绍三种异步执行加载Js 脚本的方法。1、直接document.write <scriptlanguage="javascript"> document.write("<scriptsrc='test.js'><\/script>"); &lt...
使用jQuery动态加载js脚本文件的方法
12-12
当加载完成后你可以在回调函数里执行后续操作。最基本的使用jQuery.getScript的方法是这样： 代码如下:jQuery.getScript(“/path/to/myscript.js”, function(data, status, jqxhr) {  /* 做一
javascript实现动态导入js与css等静态资源文件的方法
10-23
在JavaScript中，动态导入js和css等静态资源文件是一种提高页面加载效率的策略。它允许我们在需要时才加载相应的资源，而不是一次性加载所有文件。这有助于优化用户体验，尤其是在处理大型项目或按需加载功能时。...
判断在css加载完毕后执行后续代码示例
09-04
在网页开发中，确保CSS加载完毕后再执行特定的JavaScript代码是非常重要的，特别是在依赖CSS样式来呈现用户界面元素的情况下。这个场景通常发生在动态加载资源或构建框架时，例如在本示例中提到的JQueryMessageBox类...
动态加载JS文件的三种方法
12-07
直接看实例。例1 重新加载js文件 代码如下:function loadJs(file) {            var head = $(“head”).remove(“script[role=’reload’]”);            $(“” + “”).attr({ role: ‘reload’, src: file, type: ‘text/javascript’ }).appendTo(head);} 例2 重新载入javascript文件的方法(给js定个id),自己封装成一个方法方便大家使用： 代码如下:functio
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
01-19
我们知道javaScript是一种解释型语言，他的执行是自上而下，但是各个浏览器对于至上而下的理解是有细微差别的，而代码的上下游也就是程序流又对于程序正确至关重要，所以我觉得有必要深入理解多个js块儿的执行顺序。 首先得知道有多少方法能把javaScript加入到页面中呢？常见下述的前2种，其实还有更多。 1.页面中直接引入外部js文件：[removed][removed] 2.页面中直接写如js片段[removed]alert(1)[removed] 3.在js中引入js文件[removed](“<scr src=’my.js’></scr”+”ip
动态加载JavaScript文件
lemon今天学习了吗？的博客
07-21 1604
前言为了提高加载的效率，先让一些文件不加载。例如天地图在登录之后就自动加载，载极大程度上影响了网页性能。我们可以选择载进入地图着地等需要用到天地图模块的时候在加载这个js文件。概念通过将阻止脚本从加载过程中移出（通常称为“延迟加载”）来优化网页性能，并仅在用户需要时加载脚本（通常称为“按需加载”）。2.方法二jQuery提供的getScript()方法来检索和加载JavaScript文件；这里主要讲到两种动态加载方式。切换页面想移除这个js文件。...
动态加载js文件
樊小书生
04-19 400
在日常开发中有很多时候需要动态加载js文件的场景，先看代码再看例子。 /** * 动态加载js文件 * @params {String} url 动态加载js文件路径 * @params {Funtion} callback 加载完js文件之后的回调 * @params {String} id 动态加载js文件的script标签的id * @params {Object} parent 动态加载js文件的script标签放在哪个父元素下，默认值为document.body */ function
动态加载JS文件
liuhao9999的博客
04-13 194
在一些特殊的场景下，特别是一些库和框架的开发中，我们有时会去动态的加载JS文件并执行，下面是利用Promise进行了简单的封装。上面代码核心有两点，一是利用Promise处理异步的逻辑，而是利用script标签进行js的加载并执行。
js实现批量下载文件--点击一次执行多次(利用iframe标签)
choupixiaolin的博客
11-10 2470
a标签及href指向的如果是一个下载链接，那么相当于下载文件，对于单文件下载还是ok的，不过快速点击几个下载按钮，有的下载会被Cancelled <el-dialog title="批量录音下载" :visible.sync="dialogVisible" width="30%" :before-close="closeDown" > <span>请确认一共下载{{ dowmloadNum }}条...
javascript 解析上传的txt文件
08-05
### 回答1： 可以使用 JavaScript 的 FileReader 对象来解析上传的 txt 文件。 以下是一个简单的示例： ``` // 获取文件 input 元素 const fileInput = document.getElementById('file-input'); // 监听文件选择事件 fileInput.addEventListener('change', () => { // 获取选择的文件 const file = fileInput.files[0]; // 创建一个 FileReader 对象 const reader = new FileReader(); // 监听文件加载事件 reader.addEventListener('load', () => { // 读取完成，输出文件内容 console.log(reader.result); }); // 读取文件内容 reader.readAsText(file); }); ``` 这段代码会输出选择的 txt 文件的内容。 如果想要在页面中显示文件内容，可以将内容输出到一个元素中，例如： ``` // 获取文件内容输出元素 const output = document.getElementById('file-output'); // 将文件内容输出到元素中 output.textContent = reader.result; ``` ### 回答2： 要使用JavaScript解析上传的txt文件，可以使用File API来实现。步骤如下： 1. 首先，在HTML文件中添加一个文件上传的input元素： `<input type="file" id="fileInput">` 2. 然后，在JavaScript代码中监听文件上传事件，当文件上传时执行相应的操作： ```javascript const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { const content = e.target.result; // 在这里使用content变量来处理解析后的txt文件内容 } reader.readAsText(file); } }); ``` 3. 在文件上传事件的处理函数中，创建FileReader对象，并使用readAsText()方法将上传的文件转换为文本格式。 4. 在FileReader对象的onload事件回调函数中，可以使用e.target.result获取转换后的文本内容。在这里你可以对txt文件的内容执行各种操作，如分解字符串、提取特定数据等等。 需要注意的是，以上代码只是基本的解析操作，具体的解析内容和操作可能因需求而异。 ### 回答3： 使用JavaScript解析上传的txt文件可以通过以下步骤实现： 1. 获取上传的文件。可以通过input[type="file"]元素的change事件监听文件选择事件，然后使用event.target.files获取到上传的文件对象。 2. 读取文件内容。可以使用FileReader对象读取上传的文件内容。首先创建FileReader实例，然后使用readAsText()方法读取文件内容。读取完成后，可以使用onload事件回调获取到文件的内容。 3. 解析文件内容。根据txt文件的格式和内容，编写相应的解析逻辑。例如，如果是逐行读取，可以使用split('\n')方法将内容按换行符分割为行数组，然后使用循环遍历每一行进行处理。 4. 使用解析结果进行进一步操作。将解析后的文件内容用于后续的逻辑处理，例如显示到页面上或进行其他计算。 以下是一个简单的示例代码，用于演示如何使用JavaScript解析上传的txt文件： ```javascript // HTML代码 <input type="file" id="txtFileInput" /> // JavaScript代码 document.getElementById('txtFileInput').addEventListener('change', function(event) { var file = event.target.files[0]; // 获取上传的文件对象 var reader = new FileReader(); reader.readAsText(file); // 读取文件内容 reader.onload = function() { var content = reader.result; // 获取文件内容 var lines = content.split('\n'); // 按换行符分割为行数组 // 根据需要进行进一步解析处理 for (var i = 0; i < lines.length; i++) { console.log('Line ' + (i+1) + ': ' + lines[i]); } }; }); ``` 这样，当用户选择txt文件上传后，JavaScript代码会将文件内容解析并在控制台上逐行显示出来。你可以根据具体需求修改解析和处理的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值