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
- 深入探讨ASP.NET MVC的筛选器
- pytorch自然语言处理之Pooling层的句子分类
- su命令cannot set groups: Operation not permitted的解决方法
- 利用腾讯云 COS 云对象存储定时远程备份网站
- 腾讯云技术公开课:零基础入门高可用云端架构设计
- 包学会之浅入浅出Vue.js:开学篇
- 包学会之浅入浅出Vue.js:升学篇
- 一个只有99行代码的JS流程框架 (一)
- 【腾讯云的1001种玩法】试用腾讯云 Windows Server 2012 R2 镜像的几点经验分享
- 一个只有99行代码的JS流程框架(二)
- 看书的时候如何调试书中简单的C+代码?
- gcForest 集成学习方法的 Python 实现
- 云端架构师养成系列之一:高性能云硬盘入门与实战(视频)
- 云端架构师养成系列之二:云端负载均衡上手与实践
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- v-selectpage 基于Vue2的高清重制版
- Android Studio3.6中的View Binding初探及用法区别
- Android日志文件的读写工具类
- <Go语言学习笔记>【数组与切片】
- Android Studio 3.6 新特性一览(推荐)
- 03 Linux下的SVN服务器搭建
- Android openGl 绘制简单图形的实现示例
- 解决Android studio 3.6.1 出现Cause: unable to find valid certification path to requested target 报错的问题
- 使用kotlin实现MVP的方式(简单好用)
- Android Studio 3.6中新的视图绑定工具ViewBinding 用法详解
- android studio更新gradle错误构建项目失败的解决方法
- Android Studio使用Kotlin时,修改代码后运行不生效的解决方法
- 服务端开发人员必备网页调试工具:Postman
- 树莓派使用DHT11模块读取温湿度
- 用Go 写了个负载均衡器