美文网首页
通过JS加载脚本

通过JS加载脚本

作者: 江火渔枫 | 来源:发表于2016-07-25 14:04 被阅读37次

目的:通过js加载其他脚本
原理:动态的创建 <script> 元素
兼容:IE使用 <script> 元素的 onreadystatechange 来监控加载状态的改变,并通过判断它的 readyState 是 loaded 或 complete 来判断脚本是否加载完成。而非 IE 浏览器可以使用 onload 来直接判断脚本是否加载完成。

var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement;
var scripts = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"

var script = document.createElement("script");
script.setAttribute("type","text/javascript");

//ie执行这里
script.onreadystatechange = function() { 
    if(this.readyState == "loaded" || this.readyState == "complete"){ 
        alert("ie加载成功啦!"); 
    }
}

//Opera、FF、Chrome执行这里:
script.onload = function() { alert("Opera、FF、Chrome中加载成功啦!");}
script.setAttribute("src",scripts);
  HEAD.appendChild(script);

参考 http://www.cnblogs.com/w-y-f/p/3469211.html

相关文章

  • 通过JS加载脚本

    目的:通过js加载其他脚本原理:动态的创建 元素兼容:IE使用 元素的 onreadystatechang...

  • (转)LABJS源码浅析

    LABJS源码浅析 LABjs里的动态加载脚本文件,是指页面的js脚本执行时,通过多种方法去加载外部的js(主要区...

  • js 动态加载

    js 脚本懒加载,类似于webpack import()方法,可以适用于静态js文件的加载 脚本文件 使用方式,封...

  • jspath学习资源和脚本编写

    一) 加载js 和 编写js 的过程 将js 文件加入到项目中 加载js 代码 编写脚本 fixInstance...

  • 浏览器性能提升--js加载优化

    动态加载js脚本函数封装优点:js代码加载不阻塞浏览器其他的执行

  • 异步加载JS脚本

    异步处理外部脚本总结 Dynamic Script Element 通常我们加载JS脚本...

  • js加载执行

    js性能--加载执行 [TOC] 加载脚本的方式 脚本位置 HTML4规范指出,< script >标签可放在< ...

  • JavaScript 性能优化小记

    加载与运行 延期脚本 js文件要在dom加载完成时才会被下载 动态脚本元素 var script= d...

  • JavaScript补充

    01-延迟和异步加载JS 如何延迟加载JS:defer defer:js脚本可以延迟到文档完全被解析后执行 如何异...

  • 浏览器加载机制&白屏和FOUC演示

    1、如何异步加载脚本? 一般情况下,浏览器在加载js文件时,会阻塞其他组件的加载,因为js可能会改变页面结构或js...

网友评论

      本文标题:通过JS加载脚本

      本文链接:https://www.haomeiwen.com/subject/jjvijttx.html