把一些逻辑独立的JavaScript脚本文件单独加载,是一种常见的JavaScript动态加载技术。这样做的好处有很多,比如可以减少不必要的JavaScript脚本文件的加载,以提高网页浏览速度。

补充代码,要求用户在网页中点击【动态加载】按钮后,为html代码内需要加载的新增script脚本,脚本路径为./myjs.js,并要求文档加载完毕后再执行脚本。

myjs.js中的代码内容为:

alert("myjs.js文件已经加载完毕");

<!DOCTYPE HTML>
<html><head><meta http-equiv='Content-Type' content="text/html;charset=utf-8" />
</head><body><p style="text-align:center;"><input type="button" value="动态加载" id="button" /></p><script></script>
</body></html>

相关知识点:appendChild()、defer

参考代码:

     function loadJs() {//获取html的头部domvar theHead = document.getElementsByTagName("head").item(0);var myScript = document.createElement("script");myScript.src = "./myjs.js";//指定脚本路径myScript.type = "text/javascript";//指定脚本类型myScript.defer = true;//程序下载完后再解析和执行theHead.appendChild(myScript);//把dom挂载到头部}var inputBtn = document.getElementById('button');inputBtn.onclick = loadJs;

JavaScript网页实例:在网页里动态加载JavaScript相关推荐

  1. 动态加载JavaScript文件

    目录 配置 无脑方法! 逆袭之道! 一块蛋糕! 结论 源代码 JavaScript文件的动态加载是您必须拥有的非常有用的工具之一.它允许您通过将阻止脚本从加载过程中移出(通常称为"延迟加载& ...

  2. 动态加载javascript和css

    动态加载javascript和css 一.动态加载javascript方法 <script type="text/javascript"> var style = do ...

  3. 动态加载Javascript增强版本

    我们经常使用动态加载Javascript,写个函数很容易现实,之前也写过一个函数,不过当加载多个JS时,只能根据浏览器返回的顺序来先后加载,这肯定不是我们想要的,现在使用了一下技巧,当加载多个JS时, ...

  4. HTML5动态加载资源方式,动态加载JavaScript文件的3种方式

    以下是遇到的几种动态加载JavaScript文件的方式,持续更新中... 一.使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方 ...

  5. HTML5动态加载资源方式,动态加载JavaScript文件的两种方法

    这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...

  6. css:网页引入字体@font-face以及动态加载字体

    css:网页引入网络字体@font-face <style >/* 引入字体 */@font-face {font-family: "站酷高端黑 Regular";fo ...

  7. php 动态加载JavaScript文件或者css文件

    1. 动态加载JS文件 第一种方法: test.php <script language="JavaScript" src="test6.php?str=i lov ...

  8. 动态加载javascript

    /* *title:动态加载script文件 *description:动态加载scrip *time:2012-05-16 */function load_script(url, callback) ...

  9. [转]动态加载javascript

    动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码. 第二种是,动态创建一个script标签,设置其 ...

最新文章

  1. Flutter 拨打电话和跳转网页
  2. 基于Springboot实现共享自习室管理系统
  3. 2016百度之星 - 资格赛(Astar Round1)
  4. 全球与中国电磁探针台市场前景规划与发展动态分析报告2021-2027年版
  5. 20条编程经验(转)
  6. 好想写点儿什么,但是不知道怎么写
  7. IEEE 第二届大数据、人工智能与物联网工程国际会议 (IEEE-ICBAIE 2021)
  8. arduino支持python吗_python能给arduino的板子编程吗?stm32支持吗?什么游戏引擎支持python?...
  9. Struts2——解耦方式
  10. php为什么容易解密,PHP代码的加密和解密
  11. Srping事务的传播行为和隔离级别
  12. python安装matplotlib绘图库
  13. 什么是Servlet
  14. UWP,WPF 打包Roboto 字体
  15. windows7 照片查看器无法打开图片, windows提示因为可用内存不足,但我的内存4G?
  16. 爬虫基础篇之斗鱼弹幕
  17. How to cover an IE windowed control (Select Box, ActiveX Object, etc.) with a DHTML layer.
  18. go语言宕机(panic)——程序终止运行
  19. Python-函数入参和全局变量
  20. 阿里王坚受邀成为 TGO 鲲鹏会荣誉导师

热门文章

  1. 0欧姆电阻简介及作用
  2. Mysql limit用法
  3. 计算机音乐乐谱我已经爱上你,我已经爱上你曲谱
  4. 容易被人忽略的创业赚钱点子和赚钱的坑
  5. JavaScript基本的的语法规则
  6. drupal7创建自定义的panels布局
  7. numpy_fix函数
  8. H5案例:感恩母亲节微信互动小游戏h5模板
  9. linux patch解析
  10. Excel计算Fleiss Kappa分数