javascript 动态脚本添加的简单方法


Posted in Javascript onOctober 11, 2016

异步加载js文件或者异步加载js模块,支持所有浏览器,包括IE,参考至javascript高级编程

1.createScript方法用于创建一个script标签并添加到body标签中

2.createModule方法用于创建一个script脚本的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行script.text兼容IE添加js的脚本内容。

<button id="demo">js文件</button>
  <button id="demo1">js模块</button>
  <script type="text/javascript">
    //异步加载文件,支持所有浏览器
    document.getElementById("demo").onclick = function () {
      createScript("../../js/jquery-1.8.3.min.js");
    }

    function createScript(url) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = url;
      document.body.appendChild(script);
    }


    //这里首先会尝试标准的DOM方法,因为除了IE(在IE中会抛出错误),所有浏览器都支持这种方法,如果抛出错误则说明是IE,于是就必须使用tezt属性了
    document.getElementById("demo1").onclick = function () {
      createModule("function sayHi(){alert('Hi !')}");
    }

    function createModule(code) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      try {
        script.appendChild(document.createTextNode(code));
      } catch (ex) {
        script.text(code);
      }
      document.body.appendChild(script);
    }
  </script>

以上就是小编为大家带来的javascript 动态脚本添加的简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
js中小数转换整数的方法
Jan 26 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
js HTML5上传示例代码完整版
Oct 10 #Javascript
JavaScript  event对象整理及详细介绍
Oct 10 #Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 #Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 #Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 #Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 #Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 #Javascript
You might like
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
PHP fclose函数用法总结
2019/02/15 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Windows下PyMongo下载及安装教程
2015/04/27 Python
python代码实现ID3决策树算法
2017/12/20 Python
python 动态加载的实现方法
2017/12/22 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python如何给你的程序做性能测试
2020/07/29 Python
python如何爬取动态网站
2020/09/09 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
学生自我鉴定
2013/12/18 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python