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 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
业余方法DIY电子管FM收音机
2021/03/02 无线电
php auth_http类库进行身份效验
2009/03/19 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
Three.js基础学习教程
2017/11/16 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
python实现八大排序算法(2)
2017/09/14 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python流程控制 while循环实现解析
2019/09/02 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python中pyqtgraph知识点总结
2021/01/26 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
安全生产汇报材料
2014/02/17 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
解析Java异步之call future
2021/06/14 Java/Android
服务器间如何实现文件共享
2022/05/20 Servers