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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
JavaScript中return用法示例
Nov 29 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
微信小程序实现留言板(Storage)
Nov 02 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
网络资源
2006/10/09 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
php命令行用法入门实例教程
2014/10/27 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
php 常用的系统函数
2017/02/07 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
vue写一个组件
2018/04/09 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
React实现全选功能
2020/08/25 Javascript
python中遍历文件的3个方法
2014/09/02 Python
你应该知道的python列表去重方法
2017/01/17 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python中pyqtgraph知识点总结
2021/01/26 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
年会搞笑主持词
2014/03/27 职场文书
计算机专业自荐信
2014/05/24 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
九年级语文教学反思
2016/03/03 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫