javascript - 在javascript调用中获取文件参数

Question

我正在尝试创建一个脚本，使用户更容易使用自定义按钮，我有类似的东西

<script src="http://host.com/file.js?id=12345"></script>

我想知道如何在 file.js 中获取 id 参数。

如果我使用 document，它将获得包含脚本行的原始 html 页面，而我需要的是 id。

有什么办法可以成功获取到那个id吗？范围应该是什么？

---

已添加

我的想法是我可以在页面中有几个按钮，例如有一个小而简单的列表:

<ul>
    <li><script src="http://host.com/file.js?id=12345"></script></li>
    <li><script src="http://host.com/file.js?id=23456"></script></li>
    <li><script src="http://host.com/file.js?id=34567"></script></li>
</ul>

这最终会转化为

<ul>
    <li><a class="view40btn" href="#" data-id="12345"><strong>V40</strong> Watch the video</a></li>
    <li><a class="view40btn" href="#" data-id="23456"><strong>V40</strong> Watch the video</a></li>
    <li><a class="view40btn" href="#" data-id="34567"><strong>V40</strong> Watch the video</a></li>
</ul>

上面的列表在 HTML 中看起来像这样:

我唯一的问题是我无法将正确的 ID 分配给 data-id 属性，因为它是在 file.js 中生成的。

---

结果

从 Paulpro 的回答中我得到了它与他的想法一起工作并且知道客户端将加载更多的脚本和一些带有 id 的我为最终和工作版本稍微改变了它:

var id = (function(){
    var scripts = document.getElementsByTagName('script');
    for(var i = 0, result = {}; i < scripts.length; i++)
        if(scripts[i].hasAttribute('data-viewfileid'))
            result['id'] = decodeURIComponent(scripts[i].getAttribute('data-viewfileid'));
    return result['id'];
})();

var html = '<a class="view40btn" href="#" data-id="' + id + '"><strong>V40</strong> Watch the video</a>';
document.write(html);

用户的脚本只会是:

<script data-viewfileid="4444" src="file.js" type="text/javascript"></script>

Answer 1

您可以获得页面上的最后一个脚本元素(始终是当前正在执行的元素):

var scripts = document.getElementsByTagName('script');
var s = scripts[scripts.length - 1];

然后修改来自 this question 的查询字符串解析器之一使用该脚本 src 属性:

var url = s.src;
var qs = url.substring(url.indexOf('?') + 1).split('&');
for(var i = 0, result = {}; i < qs.length; i++){
    qs[i] = qs[i].split('=');
    result[qs[i][0]] = decodeURIComponent(qs[i][2]);
}

这将为您提供一个包含当前脚本中所有查询字符串属性的对象。您可以访问以下属性:

result['id']; // '12345'

总结

要从 file.js 中获取 id 参数，请将以下代码添加到 file.js 的顶部:

var id = (function(){

    var scripts = document.getElementsByTagName('script');
    var s = scripts[scripts.length - 1];
    var qs = s.src.substring(s.src.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][3]);
    }

    return result['id'];
})();

确保它不在任何回调函数中，例如 DOMReady 回调。

编辑:

您可以将脚本缩减为:

var scripts = document.getElementsByTagName('script');
var id = scripts[scripts.length - 1].getAttribute('data-viewfileid');

var html = '<a class="view40btn" href="#" data-id="' + id + '"><strong>V40</strong> Watch the video</a>';
document.write(html);