在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

您可以在任何内容上添加ID，包括script标记。所以你可以这样做：

HTML：

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

JS：

document.getElementById('myScript').src.split('=')[1];从该特定示例字符串中获取ID。

如果该查询字符串表示时间戳（在这种情况下您需要最新版本），则可以修改JavaScript代码以获取最新的<script>标记，如下所示：

var scripts = document.getElementsByTag('script');
var latestScriptId = scripts[scripts.length-1].src.split('=')[1];

编辑：在新修改的上下文中，您可以使用latestScriptId并将其分配到与您要创建的按钮对应的data.id属性。 ..再次，从语义上讲，使用HTML给定的id属性更有意义，另外，因为你没有使用href属性作为锚{{1}标签，你最好使用<a>元素。所以这样的事情就足够了：

<button>

Answer 2

JavaScript对加载它的脚本标记一无所知。但是，有一些解决方法。

如果文件正在服务器上进行预处理，您可以让服务器在响应中呈现值：

(function() {
  var id = <%= params.id %>;
  //other stuff here
}());

---

或者你可以给脚本标签一个id，让你的代码找到它并拉出URL。

HTML：

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

JS：

var id = document.getElementById('myscript').split('id=')[1];

---

或者在现代浏览器中，您可以执行类似这样的操作来查找与您知道脚本的位置相匹配的脚本标记。

var scriptTag = document.querySelector('script[src^="http://host.com/file.js"]');
var id = scriptTag.src.split('id=')[1];

Answer 3

您可以获取页面上的最后一个脚本元素（它始终是当前正在执行的脚本元素）：

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); 

Answer 4

另一个解决方案是使用php解释器解析.js文件。例如，在apache配置中：

AddType application/x-httpd-php .js

在JS中：

alert('<?=$_GET["id"]?>');

Answer 5

根据你的澄清，你问的怎么做并不是你想做的事。

相反，包含一个脚本，并有多个占位符节点。

HTML：

<ul>
  <li class="mybutton" data-id="12345"></li>
  <li class="mybutton" data-id="23456"></li>
  <li class="mybutton" data-id="34567"></li>
</ul>
<script src="myscript.js"></script>

JS：

// myscript.js
var buttons = document.getElementsByClassName('mybutton');
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.innerHTML = "my button html template here with id: "+ button.dataset.id;
}

在此处查看：http://jsfiddle.net/zAdnB/

Answer 6

Javascript代码没有“实现”，它是某个文件的一部分。 JS文件不是“可执行的”，没有主要方法，应该在加载文件后运行。你不能将GET参数传递给它 - 不清楚它们应该如何解释。

在HTML页面中，您应该听“onload”方法，然后使用您的参数从文件中调用该函数。