在javascript调用中获取文件参数

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

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

这最终将转化为

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

用户的脚本将仅为：

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

---

您可以在任何东西上添加ID，包括

脚本

标记。所以你可以这样做：

HTML:

JS:

document.getElementById（'myScript'）.src.split（'='）[1]

从该特定示例字符串获取ID

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

标记，如下所示：

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

EDIT:在新编辑的上下文中，您将获取

latestScriptId

，并将其分配给与要创建的按钮相对应的

data.id

属性……不过从语义上讲，使用HTML给定的

id

属性更有意义，此外，由于您没有为锚定

标记使用

href

属性，因此最好使用

元素。这样就足够了：

var myButton = document.createElement('button');
myButton.className += 'view40btn';
myButton.id = latestScriptId;

---

JavaScript对加载它的脚本标记一无所知。但是，有一些变通办法

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

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

---

或者在现代浏览器中，您也许可以这样做来查找与您知道的脚本所在位置相匹配的脚本标记

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

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

---

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

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

然后从中修改一个查询字符串解析器，以使用该脚本

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

总之

要从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'];
})();

var id=（函数（）{
var scripts=document.getElementsByTagName（'script'）；
var s=scripts[scripts.length-1]；
var qs=s.src.substring（s.src.indexOf（'？'）+1）.split（'&'）；
对于（var i=0，result={}；i

确保它在任何回调函数（如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); 

var scripts=document.getElementsByTagName（'script'）；
var id=scripts[scripts.length-1].getAttribute（'data-viewfileid'）；
var html=''；
document.write（html）；

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

AddType application/x-httpd-php .js

在JS中：

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

警报（“”）；

根据您的澄清，您要求如何做的并不是您想要做的

而是包含一个脚本，并具有多个占位符节点

HTML:

JS:

//myscript.js
var buttons=document.getElementsByClassName（'mybutton'）；
对于（变量i=0；i

---

在这里查看它的工作情况：

这样我就不能在同一页中有两个按钮。。。对我不好：（@balexandre您可以查看到目前为止最新的脚本标记Yes，但我会正确加载其他脚本吗？…问题更新我的评论与回答中的相同：我不能在同一页面中有两个按钮：问题更新。@balexandre这里的第一个选项适用于多个按钮，假设您使用的是服务器端laLanguage（我猜您会这样做，因为您正在使用查询参数获取脚本）。@balexandre那么您做得不对……而是包括一个脚本，并有一些占位符节点：

@balexandre请查看我的备选答案，其中描述了您要做的事情，但没有回答您提出的特定问题…
（将始终是当前正在执行的）
如果你有对另一个JS文件的函数调用，这不是真的吗？@ColinDeClue它必须在文件
file.JS
和任何函数之外。我在回答的末尾添加了一个注释。我修改了脚本，因为开发人员html可能有更多的脚本和一些带有
id的脚本，但你的想法真的很好，我将使用最终脚本更新我的答案，以供将来参考。谢谢！@balexandre不客气，请注意，我使用了一个我相信您可以使用的简短脚本来更新我的答案，而不是循环。为什么要将
script
标记放在无序列表中？这在语义上不正确的HTML。您是否正在查看rend客户端的er模板？这是一个例子…例如，我可以有一个很好的页面讨论两个视频，开发人员希望放置两个按钮，以便用户看到它们，但它们的id不同…-这是一个简单的“易于添加的按钮”脚本。不要使用HTML，从JS动态创建按钮。Facebook就是这样工作的——它会动态创建整个内容。但这个例子是有缺陷的——你不应该把脚本标记放在无序列表中。脚本标记的本意不是这样做的——你不需要将脚本标记转换为锚定标记，你必须创建那些按钮动态加载并在t处加载脚本标记
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'

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

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

AddType application/x-httpd-php .js

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

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

// 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;
}