<script> 带有参数的最简单标签是什么

我想包括一个脚本标记，同时为它提供一个参数

为脚本URL提供一个参数(缺点：生成多个JS文件(

<script src="http://example.com/something.js?P=123" type="text/javascript"></script>

在脚本标签中隐藏参数(缺点：与#1相同(

<script src="http://example.com/scripts/123/something.js" type="text/javascript"></script>

谷歌分析方式(缺点：丑陋，复杂，全局变量(

<script type="text/javascript" charset="utf-8">
  var _something = _something || 123;
  (function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://example.com/something.js';
    var ss = document.getElementsByTagName('script')[0];
    ss.parentNode.insertBefore(s, ss);
  })();
</script>

最好的做法是在外部脚本中定义一些东西(函数&c(，但什么都不执行。然后有一个内联脚本，它调用在外部脚本中定义的函数/方法。

<script src="http://example.com/something.js" type="text/javascript"></script>
<script type="text/javascript">
    something(123);
</script>

如果脚本的执行方式取决于它的调用方式，则可以添加类似选项1的参数。

其他方式有：

<script params='{"abc": 123}' src="script.js"></script><!-- params is a non standard, non official attr that the script will read -->

或

<script>var _abc = 123;</script>
<script src="script.js"></script>

甚至

<script src="script.js#abc=123"></script>

不过，我不得不同意@outis的观点：始终为每个人加载相同的东西，然后按照你/客户的意愿执行。

我这样做是为了一个跨子域的XHR处理程序。我称之为：

<script type="text/javascript" src="xd.js#subdomain"></script>

然后在脚本中，按如下方式解析(使用jQuery(：

$('script').each(function(){
    if((src = this.src).indexOf('xd.js') < 0){ return; }
    xds = src.substr(src.indexOf('#') + 1).split(',');
    // do stuff with xds
});

您的第一个示例不需要生成多个文件。它可以由JavaScript单独使用，通过检测window.location.href并解析它(您可能会发现http://phpjs.org/functions/parse_url:485和http://phpjs.org/functions/parse_str:484有助于做到这一点：var queryString = parse_str(parse_url(window.location.href).query);(。

但是，如果您使用类似#P=123而不是?P=123的东西，则不会导致用户再次下载该文件，因此我建议您这样做(在这种情况下，将上面代码示例中的"query"更改为"fragment"(。

另一种可能性是使用HTML5保留的data-*属性，并在脚本中检测它们的值：

<script src="http://example.com/something.js" data-myOwnAttribute="someValue" data-anotherCustomAttribute="anotherValue"></script>

然后，脚本将沿着以下行进行检测：

(function () {
    function getScriptParam (attr) {
        var scripts = document.getElementsByTagName('script'),
            currentScript = scripts[scripts.length-1];
        return currentScript.getAttribute('data-' + attr); // in future, could just use the HTML5 standard dataset attribute instead: currentScript.dataset[attr]
    }
    var myOwnAttribute = getScriptParam('myOwnAttribute');
    // ... do stuff here ...
}());

谷歌丑陋的API的真正优势在于，它允许开发人员将代码放入文档的<head>中(被认为是正确的形式(，同时仍然以跨浏览器的方式异步操作。我认为，如果他们将动态脚本标记技术与上述任何一种方法相结合，他们确实可以避免全局性。

相关内容

最新更新

热门标签：