zoukankan      html  css  js  c++  java
  • JS魔法堂:获取当前脚本文件的绝对路径

    一、前言                        

      当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这个问题吧!

    二、各大浏览器的实现方式                

      [a]. Chrome和FF

      超简单的一句足矣!

    var getCurrAbsPath = function(){
        return document.currentScript.src;
    };

    这里利用了对象 document.currentScript ,它返回的是当前执行的script元素;然后调用script元素的src属性即可获取脚本文件的绝对路径。

      [b]. IE10+、Safari和Opera9

     利用Error对象的stack属性(IE10+)、sourceURL属性(Safari)和stacktrace属性(Opera9)萃取绝对路径

    var getCurrAbsPath = function(){
        var a = {}, stack;
        try{
          a.b();
        }
        catch(e){
          stack = e.stack || e.sourceURL || e.stacktrace; 
        }
        var rExtractUri = /(?:http|https|file)://.*?/.+?.js/, 
            absPath = rExtractUri.exec(stack);
        return absPath[0] || '';
    }; 

      [C]. IE5.5~9

     遍历文档中的script标签

    var getCurrAbsPath = function(){
        var scripts = document.scripts;
        var isLt8 = ('' + document.querySelector).indexOf('[native code]') === -1;
        for (var i = scripts.length - 1, script; script = scripts[i--];){
           if (script.readyState === 'interative'){
              return isLt8 ? script.getAttribute('src', 4) : script.src;   
           }
        }
    };

    三、相关知识介绍                      

    IE5.5~9下script的readyState表示该script元素的状态,分别有以下的状态值:

    uninitialized:未初始化

    loading:正在加载

    loaded:加载完成

    interative:执行中

    complete:执行完

    可通过订阅onreadystatechange事件来监听script元素状态的变化。但不幸的是loaded和complete状态并出现顺序不定且有可能仅出现其中一个,因此建议在动态添加script元素时,先设置src属性后再将script元素添加到DOM树中,这样loaded和complete状态仅会出现其中一个(虽然每次请求时,哪个出现是不定的),比较好监测。

    四、IE和FF下的另一种方式                

     通过订阅 window.onerror 事件,事件处理函数将接受三个参数,分别是msg,url和num。这里url就是当前脚本的绝对路径了。

    五、总结                        

     完整的getCurrAbsPath请浏览https://github.com/fsjohnhuang/getCurrAbsPath/blob/master/lib/getCurrAbsPath.js

     尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3903607.html,^_^肥仔John

  • 相关阅读:
    mock模拟数据的使用方法
    mac下载wepy报错解决方案
    收集:40种js常用技巧
    学习——面试现场整理的笔记
    mac又更新系统了!!!
    H5的优化方案
    双十一到了,把自己学习的运营笔记发一部分
    mongodb操作笔记
    HTTP协议及常见状态码
    跨域解决方案
  • 原文地址:https://www.cnblogs.com/fsjohnhuang/p/3903607.html
Copyright © 2011-2022 走看看