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

 更新时间:2016年10月11日 08:42:19   投稿:jingxian  
下面小编就为大家带来一篇javascript 动态脚本添加的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

异步加载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 动态脚本添加的简单方法全部内容了,希望大家多多支持脚本之家~

相关文章

  • 详解Webpack如何引入CDN链接来优化编译后的体积

    详解Webpack如何引入CDN链接来优化编译后的体积

    这篇文章主要介绍了详解Webpack如何引入CDN链接来优化编译后的体积,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 小程序如何自主实现拦截器的示例代码

    小程序如何自主实现拦截器的示例代码

    这篇文章主要介绍了小程序如何自主实现拦截器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • javascript动态生成树形菜单的方法

    javascript动态生成树形菜单的方法

    这篇文章主要介绍了javascript动态生成树形菜单的方法,涉及JavaScript针对页面元素与属性的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 如何通过JS实现转码与解码

    如何通过JS实现转码与解码

    这篇文章主要介绍了如何通过JS实现转码与解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • javascript实现二级级联菜单的简单制作

    javascript实现二级级联菜单的简单制作

    这篇文章主要介绍了javascript实现二级级联菜单的简单制作,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 微信小程序左右滚动公告栏效果代码实例

    微信小程序左右滚动公告栏效果代码实例

    这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript大数相加相乘的实现方法实例

    JavaScript大数相加相乘的实现方法实例

    这篇文章主要给大家介绍了关于JavaScript大数相加相乘的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table表格中的某行某列并打印其值

    这篇文章主要介绍了JavaScript遍历table表格中的某行某列并打印其值,需要的朋友可以参考下
    2014-07-07
  • js图片轮播效果实现代码

    js图片轮播效果实现代码

    这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下
    2015-11-11
  • input的focus方法使用

    input的focus方法使用

    input有个focus方法,今天发现就在onblur事件里面起作用,onchang等事件中根本不起作用的
    2010-03-03

最新评论