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 相关文章推荐
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 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
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
php解决安全问题的方法实例
2019/09/19 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
python实现目录树生成示例
2014/03/28 Python
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Django实现组合搜索的方法示例
2018/01/23 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
技术学校毕业生求职信分享
2013/12/02 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
矿泉水广告词
2014/03/20 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
项目合作意向书
2015/05/08 职场文书
企业法人代表证明书
2015/06/18 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏