动态加载JS文件方法总结

这次给大家带来动态加载JS文件方法总结,动态加载JS文件的注意事项有哪些,下面就是实战案例,一起来看一下。

一、使用document.write/writeln()方式

该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会导致整个页面重绘。

实现方式:

复制代码 代码如下:

document.writeln(“”);

需要注意的是特殊字符的转义。

二、使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){ alert('done');});

登录后复制

三、使用原生js方法

原理:动态创建script标签,并指定script的src属性

function loadJs(url,callback){ var script=document.createElement('script'); script.type="text/javascript"; if(typeof(callback)!="undefined"){ if(script.readyState){ script.onreadystatechange=function(){  if(script.readyState == "loaded" || script.readyState == "complete"){  script.onreadystatechange=null;  callback();  } } }else{ script.onload=function(){  callback(); } } } script.src=url; document.body.appendChild(script); } loadJs("test.js",function(){ alert('done'); });

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

webpack+myproject构建项目时ip无法访问应如何处理

this指向与call、apply使用

webpack vue项目开发环境局域网绑定IP方法

以上就是动态加载JS文件方法总结的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2764010.html

(0)
上一篇 2025年3月8日 10:22:46
下一篇 2025年3月8日 10:22:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 怎样实现js支持post请求跨域

    这次给大家带来怎样实现js支持post请求跨域,实现js支持post请求跨域的注意事项有哪些,下面就是实战案例,一起来看一下。 JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: “http://127.0.0.…

    编程技术 2025年3月8日
    100
  • JS实现文件拖拽步骤详解(附代码)

    这次给大家带来JS实现文件拖拽步骤详解(附代码),JS实现文件拖拽的注意事项有哪些,下面就是实战案例,一起来看一下。 1.效果图: 2.源码 #p1 { width: 350px; height: 70px; padding: 10px; …

    2025年3月8日
    200
  • 对JSON 初步了解

    json 在javascript中有着重要的作用,本篇将对其作出相关的讲解。 在 JavaScript 中创建 JSON 对象Name: Age: Address: Phone: var JSONObject= {“name”:”Bill …

    编程技术 2025年3月8日
    200
  • 了解json的相关语法

    json的相关语法对js来说很重要,本篇将对其进行讲解。 JSON 语法规则 JSON 语法是 JavaScript 对象表示法语法的子集。 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON…

    编程技术 2025年3月8日
    200
  • 如何使用JSON

    json的使用对于js来说很重要,本篇将讲解json的使用情况。 把 JSON 文本转换为 JavaScript 对象 JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 J…

    编程技术 2025年3月8日
    200
  • vue.js element-ui tree树形控件如何修改iview

    这次给大家带来vue.js element-ui tree树形控件如何修改iview,vue.js element-ui tree树形控件修改iview的注意事项有哪些,下面就是实战案例,一起来看一下。z 实现原理 修改了element-u…

    2025年3月8日
    200
  • JS易错点总结与解决

    这次给大家带来JS易错点总结与解决,解决JS易错点的注意事项有哪些,下面就是实战案例,一起来看一下。 1.前言 这段时间,金三银四,很多人面试,很多人分享面试题。在前段时间,我也临时担任面试官,为了大概了解面试者的水平,我也写了一份题目,面…

    2025年3月8日 编程技术
    200
  • JS里new()使用技巧

    这次给大家带来JS里new()使用技巧,JS里new()使用的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中…

    2025年3月8日
    200
  • $http方法传递json参数步骤详解

    这次给大家带来$http方法传递json参数步骤详解,$http方法传递json参数的注意事项有哪些,下面就是实战案例,一起来看一下。 具体如下: 一、$http POST方法默认提交数据的类型为application/json var d…

    2025年3月8日
    200
  • JS获取url参数并发送Json格式POST请求案例详解

    这次给大家带来JS获取url参数并发送Json格式POST请求案例详解,JS获取url参数并发送Json格式POST请求的注意事项有哪些,下面就是实战案例,一起来看一下。 登录后复制 一、获取url所有参数值 function US() {…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论