Question

我无法理解逻辑，或许我在想它！

在将其附加到DOM之前，我需要确保脚本的id属性是唯一的。

以下是一些示例，向您展示我需要的内容：

如果在<head>元素中我有3个子script元素，例如：

<script id="script-0"></script>
<script id="script-1"></script>
<script id="script-2"></script>

我希望我的新script元素有id "script-3"

如果我有3个孩子script元素，例如：

<script id="script-0"></script>
<script id="script-2"></script>
<script id="script-3"></script>

我希望我的新script元素有id "script-1"或"script-4"

在这种情况下：

<script id="script-1"></script>
<script id="script-2"></script>

我希望我的新script元素有id "script-0"或"script-3"

只要每个脚本元素的id属性都是唯一的！

在这种情况下，每个script元素实际上都在执行JSONP请求，因此，由于它是异步的，因此可能会在此期间向script添加另一个DOM元素。需要它自己独特的id。

JSONP请求收到回复后，会从DOM中删除，因此id中的差距，如script-0，script-1，{{例如，1}}，script-3和script-4，因为JSONP请求script-6和script-2可能已收到响应并已从script-5中删除。在这种情况下，我希望新的DOM元素包含script id，script-2或最坏情况：script-5。

我希望这很清楚！

我无法弄清楚逻辑，任何帮助都会非常感激！

哦，只有香草JS;没有jQuery等，谢谢！

我保证在回复此问题时发布的每个答案都会在Stackoverflow上发布一个问题的答案！答应！

Answer 1

您可以这样做：

var scripts = document.getElementsByTagName('script'); // we're getting all scripts from page
var ids = [];
for (i in scripts) {  // iterate by them
    var id = scripts[i].id;  // take 'id' attribute from current script 
    if (id && id.match(/script-\d+/)) {  // check if id matches 'script-...' pattern
        ids.push( parseInt(id.substring(id.indexOf('-')+1),10) );  // take only nomber and convert it to a decimal number, push this number to ids array
    }
}
ids = ids.sort(function(a,b){return a > b;});  // sort array ASC
var lastId = ids.pop();   // take the last value from array

Answer 2

是否真的有必要填补空白？

我会想象保持一个正在运行的计数器，只是增加它会更容易使用，特别是考虑到你可以有最多9,007,199,254,740,992个唯一的JSONP请求：

var requestJSONP = (function () {
    var guid = 0;

    return function (url) {
        var id = 'script-' + guid++;

        var script = document.createElement('script');
        script.id = id;
        script.src = url;
        script.type = 'text/javascript';

        script.onload = function () {
            this.parentNode.removeChild(this);
        };

        document.getElementsByTagName('head')[0].appendChild(script);

        return id;
    };
})();

闭包是可选的，但它会阻止任何其他脚本更改guid。

示例：

var scriptId = requestJSONP('/request/resource?callback=handler');

确保元素id属性是个体的

2 个答案: