What's the simplest tag with params

问题

I want to include a script tag, while providing a parameter to it. This is what I came up with so far

Provide a parameter to script URL (cons: generate multiple JS files)

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

Hide parameter in script tag (cons: same as #1)

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

Google Analytics way (cons: ugly, complicated, global variables)

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

回答1:

If the way the script is executed, depends on how it's called, you can add params like your option 1.

Other ways are:

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

or even

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

I have to agree with @outis though: load the same thing for everybody, always, and execute it like you/the client want(s) afterwards.

回答2:

The best thing is to define things (functions &c) in the external script but execute nothing. Then have an inline script that calls functions/methods defined in the external script.

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

回答3:

I do this for a cross-sub-domain XHR handler that I have. I call it as:

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

and then in the script, parse it as such (using jQuery):

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

    // do stuff with xds
});

回答4:

Your first example does not need to generate multiple files. It can be used by JavaScript alone, by detecting window.location.href and parsing it (you might find the likes of http://phpjs.org/functions/parse_url:485 and http://phpjs.org/functions/parse_str:484 helpful in doing this: var queryString = parse_str(parse_url(window.location.href).query); ).

However, if you use something like #P=123 instead of ?P=123, you won't cause another download of the file by your users, so I'd recommend that instead (in which case change "query" in the above code sample to "fragment").

Another possibility is using the HTML5-reserved data-* attributes, and detecting their values within your script:

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

The script would then detect along these lines:

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

The real advantage of Google's ugly API is that it allows developers to drop in that code in the <head> of the document (considered proper form), while still acting asynchronously in a cross-browser way. I think they could indeed avoid the global had they combined their dynamic script-tag technique with either of the above approaches.

来源：https://stackoverflow.com/questions/5774672/whats-the-simplest-script-tag-with-params

标签

javascript

script-tag

What's the simplest <script> tag with params

问题

回答1:

回答2:

回答3:

回答4: