动态加载JS文件3种方式整理

这次给大家带来动态加载JS文件3种方式整理,动态加载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'); });

登录后复制

还可以使用同样的原理动态加载css文件,只不过插入的的父节点是head标签。

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

推荐阅读:

如何动态引入JS文件

H5中data-*属性使用方法汇总

怎么实现JS同步、异步、延迟加载

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

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

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

(0)
上一篇 2025年3月8日 08:17:37
下一篇 2025年3月5日 16:34:27

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

相关推荐

  • 如何使用Node.js中Koa实现用户认证

    这次给大家带来如何使用Node.js中Koa实现用户认证,使用Node.js中Koa实现用户认证的注意事项有哪些,下面就是实战案例,一起来看一下。 一、前置知识 基于Token的身份验证 Koajs 中文文档 Koa 框架教程 二、环境 M…

    2025年3月8日 编程技术
    200
  • vue嵌套路由与404重定向实现方法分析_vue.js

    这次给大家带来怎样使用vue嵌套路由,使用vue嵌套路由的注意事项有哪些,下面就是实战案例,一起来看一下。 第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思。 …

    2025年3月8日
    200
  • 优化Vue.js代码方法总结

    这次给大家带来优化Vue.js代码方法总结,优化Vue.js代码的注意事项有哪些,下面就是实战案例,一起来看一下。 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为V…

    编程技术 2025年3月8日
    200
  • 怎样使自己的js代码国际化

    这次给大家带来怎样使自己的js代码国际化,使js代码国际化的注意事项有哪些,下面就是实战案例,一起来看一下。 当我们在做前台页面开发时,由于页面内容过多,过于繁杂,有的时候一个页面上千行的(当然这样的页面也就算一般的),为了减少页面的内容,…

    2025年3月8日 编程技术
    200
  • 怎样使用JS实现百度搜索框

    这次给大家带来怎样使用JS实现百度搜索框,使用JS实现百度搜索框的注意事项有哪些,下面就是实战案例,一起来看一下。 效果:   1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间。   2.点击页面头部的换肤,自动更换背景图片…

    2025年3月8日
    200
  • JS+CSS3做出图片绑定鼠标移动事件放大

    这次给大家带来JS+CSS3做出图片绑定鼠标移动事件放大,JS+CSS3做出图片绑定鼠标移动事件放大的注意事项有哪些,下面就是实战案例,一起来看一下。 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果…

    2025年3月8日 编程技术
    200
  • 怎么使用JS实现哈希表

    这次给大家带来怎么使用JS实现哈希表,使用JS实现哈希表的注意事项有哪些,下面就是实战案例,一起来看一下。 在算法中,尤其是有关数组的算法中,哈希表的使用可以很好的解决问题,所以这篇文章会记录一些有关js实现哈希表并给出解决实际问题的例子。…

    2025年3月8日
    200
  • Ajax调用restful接口传送Json格式数据的方式(附有代码)

    这篇文章主要介绍了ajax调用restful接口传送json格式数据的方法的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧 ajax传送json格式数据,关键是指定contentType,data要是json格式 如果是res…

    编程技术 2025年3月8日
    200
  • JS中变量与函数提升步骤详解

    这次给大家带来JS中变量与函数提升步骤详解,JS中变量与函数提升的注意事项有哪些,下面就是实战案例,一起来看一下。 1在js中只有两种作用域 a:全局作用域 b:函数作用域 在ES6之前,js是没有块级作用域。 首先来解释一下什么是没有块级…

    2025年3月8日 编程技术
    200
  • 如何使用node.js启动后台运行forever

    这次给大家带来如何使用node.js启动后台运行forever,使用node.js启动后台运行forever的注意事项有哪些,下面就是实战案例,一起来看一下。 我们知道想要项目部署后运行 需要使用命令行 cd 到项目目录然后执行 npm i…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论