代码之家  ›  专栏  ›  技术社区  ›  Neil C. Obremski

什么是我的脚本SRC URL?

  •  32
  • Neil C. Obremski  · 技术社区  · 16 年前

    是否有一种简单可靠的方法来确定当前正在执行的javascript文件的URL(在网页内)?

    我唯一的想法是扫描dom中的所有脚本 src 属性来查找当前文件的引用方式,然后通过将其应用于 document.location . 有人有其他的想法吗,有什么超简单的方法我完全忽视了吗?

    更新:通过DOM访问的脚本元素已经具有 SRC 包含完整URL的属性。我不知道这有多普遍/标准,但你也可以使用 getAttribute("src") 它将返回[x]HTML中的任何原始属性值。

    6 回复  |  直到 11 年前
        1
  •  40
  •   Crescent Fresh    16 年前

    把它放到需要知道它自己的URL的JS文件中。

    完全合格 (如 http://www.example.com/js/main.js ):

    var scriptSource = (function(scripts) {
        var scripts = document.getElementsByTagName('script'),
            script = scripts[scripts.length - 1];
    
        if (script.getAttribute.length !== undefined) {
            return script.src
        }
    
        return script.getAttribute('src', -1)
    }());
    

    当它出现在源代码中时 (如 /js/main.js ):

    var scriptSource = (function() {
        var scripts = document.getElementsByTagName('script'),
            script = scripts[scripts.length - 1];
    
        if (script.getAttribute.length !== undefined) {
            return script.getAttribute('src')
        }
    
        return script.getAttribute('src', 2)
    }());
    

    http://www.glennjones.net/Post/809/getAttributehrefbug.htm 用于解释 getAttribute 正在使用的参数(这是一个IE错误)。

        2
  •  30
  •   kiprainey    11 年前

    对于最近的浏览器,可以使用document.currentscript获取此信息。

    var mySource = document.currentScript.src;
    

    其好处是它对于异步加载的脚本更可靠。缺点是,据我所知,它并没有得到普遍支持。它应该适用于chrome>=29、firefox>=4、opera>=16。像许多有用的东西一样,它似乎在IE中不起作用。

    当我需要获取脚本路径时,我会检查是否定义了document.currentscript,如果没有,则使用接受答案中描述的方法。

    if (document.currentScript) {
        mySource = document.currentScript.src;
    } else {
        // code omitted for brevity
    }
    

    https://developer.mozilla.org/en-US/docs/Web/API/document.currentScript

        3
  •  6
  •   Community CDub    8 年前

    当它出现在源代码中时 (例如) /js/main.js 这是 跨浏览器 :

    var scriptSource = (function() 
    { 
        var scripts = document.getElementsByTagName('script'), 
            script = scripts[scripts.length - 1]; 
    
        //No need to perform the same test we do for the Fully Qualified
        return script.getAttribute('src', 2); //this works in all browser even in FF/Chrome/Safari
    }()); 
    

    完全合格 (例如) http://www.example.com/js/main.js ):

    经过一些测试,似乎很难得到 完全合格 一种跨浏览器的方式。这个 solution suggested by Crescent Fresh 不在IE8中工作以获得完全合格 ,即使它在IE7中有效

        4
  •  4
  •   Mkdgs    12 年前

    此方法适用于延迟、异步和延迟加载 因为您知道脚本的文件名,如果它是唯一的

    /* see  
     * http://stackoverflow.com/questions/984510/what-is-my-script-src-url/984656#984656
     * http://www.glennjones.net/Post/809/getAttributehrefbug.htm
     * 
     * iterate all script to find script with right filename
     * this work with async and defer (but your script MUST have a unique filemane)
     * mozilla support document.currentScript and we use it, if is set
     *
     * this will not work with local script loaded by jQuery.getScript(),
     * since there is no script tag added into the dom. the script is only evaluated in global space.
     * http://api.jquery.com/jQuery.getScript/
     *  
     * to fix this odd, you can add a reference in meta ( meta[name=srcipt][content=url] )
     * when you load the script
     */
    var scriptFilename = 'jquery.plugins.template.js'; // don't forget to set the filename 
    var scriptUrl = (function() {
        if (document.currentScript) { // support defer & async (mozilla only)
            return document.currentScript.src;
        } else {
            var ls,s;
            var getSrc = function (ls, attr) {
                var i, l = ls.length, nf, s;
                for (i = 0; i < l; i++) {
                    s = null;
                    if (ls[i].getAttribute.length !== undefined) { 
                        s = ls[i].getAttribute(attr, 2);                    
                    }               
                    if (!s) continue; // tag with no src
                    nf = s;
                    nf = nf.split('?')[0].split('/').pop(); // get script filename
                    if (nf === scriptFilename) {
                        return s;
                    }
                }
            };          
            ls = document.getElementsByTagName('script');
            s = getSrc(ls, 'src');
            if ( !s ) { // search reference of script loaded by jQuery.getScript() in meta[name=srcipt][content=url]
                ls = document.getElementsByTagName('meta');             
                s = getSrc(ls, 'content');
            }           
            if ( s ) return s;
        }
        return '';
    })();
    
    var scriptPath =  scriptUrl.substring(0, scriptUrl.lastIndexOf('/'))+"/";
    

    一个jquery插件模板: https://github.com/mkdgs/mkdgs-snippet/blob/master/javascript/jquery.plugins.template.js

    注意:这不适用于jquery.getscript()加载的本地脚本,因为没有脚本标记添加到DOM中。脚本只在全局空间中计算。 http://api.jquery.com/jQuery.getScript/

    要修复它,您可以执行以下操作:

    function loadScript(url,callback) {     
    
        if ( $('[src="'+url+'"]').length ) return true; // is already loaded    
    
        // make a reference of the loaded script
        if ( $('meta[content="'+url+'"]', $("head")).length ) return true; // is already loaded 
        var meta = document.createElement('meta');
        meta.content = url;
        meta.name = 'script';
        $("head").append(meta);
    
        return $.ajax({
              cache: true,
              url: u,
              dataType: 'script',
              async: false,
              success : function (script) {                     
                    try { 
                        if ( typeof callback == 'function' ) callback();    
                    } catch (error) { 
                        //console.log(error);
                    }
              }
         });
    }
    
        5
  •  0
  •   Jason Watts    16 年前

    如果这是一个严格的客户解决方案,那么您的方案听起来相当不错。

    如果您要在服务器上编写代码,您可能只需使用脚本的完全解析的URL填充一个DIV/HIDDEN字段/(在此处插入您的fave html元素),然后在客户端使用您的javascript来获取它。

        6
  •  0
  •   Jonathan Fingland    16 年前

    你可能想看看 https://addons.mozilla.org/en-US/firefox/addon/10345 如果您有兴趣了解哪些函数(以及哪些文件)正在您不控制的页面上执行。

    如果你想知道 你的 脚本正在执行,那么有很多方法。有了萤火虫你可以 console.log() 信息。即使只是在代码中添加警报语句(虽然很烦人),也可以帮助以一种低技术的方式进行调试。您还可以引发错误并捕获它们,然后使用错误的属性进行处理(请参见: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Error )

    然而,为什么这一点很重要?如果脚本已经导致错误,那么很容易确定错误发生的位置。如果根本不是错误,那么知道哪一个有什么好处 文件 它来自哪里?