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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
使用JS实现动态时钟
Mar 12 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
js实现限定范围拖拽的示例
Oct 26 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
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
js实现左右轮播图
2020/01/09 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python request中文乱码问题解决方案
2020/09/17 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
类如何去实现接口
2013/12/19 面试题
创业计划书的主要内容有哪些
2014/01/29 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
市场拓展计划书
2014/05/03 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle