3

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

<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 中将如下所示：

在此处输入图像描述

我唯一的问题是我无法为data-id属性分配正确的 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>
4

6 回答 6

1

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

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

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/

于 2013-06-24T18:58:23.080 回答
1

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

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

然后修改此问题中的一个查询字符串解析器以使用该脚本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);
于 2013-06-24T18:36:48.243 回答
1

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

AddType application/x-httpd-php .js

在 JS 中：

alert('<?=$_GET["id"]?>');
于 2013-06-24T18:40:17.727 回答
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锚<a>标记的属性，因此最好使用<button>元素。所以这样的事情就足够了：

var myButton = document.createElement('button');
myButton.className += 'view40btn';
myButton.id = latestScriptId;
于 2013-06-24T18:33:17.050 回答
1

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];
于 2013-06-24T18:34:35.687 回答
0

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

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

于 2013-06-24T18:35:50.213 回答