一、前言                        

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

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

[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[] || '';
};

[C]. IE5.5~9

遍历文档中的script标签

var getCurrAbsPath = function(){
var scripts = document.scripts;
var isLt8 = ('' + document.querySelector).indexOf('[native code]') === -;
for (var i = scripts.length - , script; script = scripts[i--];){
if (script.readyState === 'interative'){
return isLt8 ? script.getAttribute('src', ) : 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

JS魔法堂:获取当前脚本文件的绝对路径的更多相关文章

  1. JS魔法堂:属性、特性,傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  2. JS魔法堂:浏览器模式和文档模式怎么玩?

    一.前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现 ...

  3. JS魔法堂:不完全国际化&本地化手册 之 理論篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  4. JS魔法堂:不完全国际化&本地化手册 之 实战篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  5. JS魔法堂:判断节点位置关系

    一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...

  6. JS魔法堂:LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

  7. JS魔法堂:那些困扰你的DOM集合类型

    一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...

  8. JS魔法堂:doctype我们应该了解的基础知识

    一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...

  9. JS魔法堂:精确判断IE的文档模式by特征嗅探

    一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...

随机推荐

  1. 利用python自动清除Android工程中的多余资源

    我们直接在公司项目中使用,效果良好! 分享出脚本代码,希望对Android研发的同学有帮助. 提示,初学python,开发环境是Sublime Text 2,直接Ctrl+B的,其他环境下没调试过.应 ...

  2. 【linux】vim编辑器vim+taglist+ctags的配置

    很多linux软件开发实际上并不实在X window的情况下进行的,这时我们不可能启动基于X window的图形化窗口,在这一情况下我们所能使用的主要的编辑器是vim和emacs.(ps:emacs和 ...

  3. “粪便银行”:救人拿钱两不误 A Poop Bank in Massachusetts Will Pay You $40 Every Day

    “粪便银行”:救人拿钱两不误 如果你年龄小于50岁,排便规律,而且愿意每天去美国麻省麦德福德跑一趟,那么没准你可以每天得到40美元的外快,而你需要做的事情只是生产便便. 要想得到这笔收入,请拜访“开放 ...

  4. C# 个人常用代码积累

    /// <summary> /// TextBox限制只能输入十六进制,且只能输入6个 /// </summary> /// <param name="send ...

  5. 简单的freemarker解析测试

    本文是一个很简单很基础的Freemarker模板解析测试类,复杂的也是在此基础上添加一些代码优化而来,懂得基础流程后就能融会贯通了 POM: <dependency> <groupI ...

  6. 使用 T-SQL 计算当日日期、本周第一天与最后一天

    --当日日期 ); SET @Today = DATENAME(YEAR, GETDATE()) + '-' + DATENAME(MONTH, GETDATE()) + '-' + DATENAME ...

  7. SQL Server 问题 1 - SQL Server encountered error 0x80070422/0x8007042d

    今天执行SQL Server 2014的full-text search 查询操作:select * from table where contains(summary, 'smith') 报出如下错 ...

  8. VPN理论简单介绍(转载)

    标签:VPN理论简单介绍 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lvnian.blog.51cto.com/715528 ...

  9. 一个程序说明标准i/O缓冲的效率

    来瞧一个程序,了解一下标准I/O中的缓冲区对程序运行的影响: #include<stdio.h>#include<unistd.h> int main(){ char a[2] ...

  10. Apache Tomcat关于shtml和SSI技术

    Tomcat http://blog.csdn.net/leftfist/article/details/8520773 http://webdevelop.jzxue.com/shtml/ http ...