In Javascript, is it possible to pass a variable into [removed] “src” parameter?

Question

Is it possible in Javascript to pass a variable through the src parameter? ie.

Answer 1

I use the following pattern to convert query variables from <script src="script.js?foo=bar&baz=zing"></script> to an object containing key:value pairs. Code is placed at the top of script.js:

    var getVars = {};
    
    (function(){
        var scripts, currentScript, queryString;

        scripts = document.getElementsByTagName('script');
        currentScript = scripts[ scripts.length - 1 ];
        queryString = currentScript.getAttribute('src').split("?").pop().split('&');
        for(var i=0;i<queryString.length;i++){
            var keyVal = queryString[i].split('=');
            getVars[ keyVal[0] ] = keyVal[1];
        }
    
    }());
    // console.info( getVars );
    // Object { foo="bar", baz="zing"}

This probably won't work with deferred / asynchronously added script elements, as it relies on immediate code execution.

Answer 2

I suggest to use more safe approach - must add an ID:

<script id="myTargetScript" src="http://example.com/file.js?param=value" />

then in your .js file

    function GetParams(target_id)
    {
        var getVars = {};
        if( document.getElementById(target_id) )
        {
            var queryString = document.getElementById(target_id).getAttribute('src').split("?").pop().split("&");
            for(var i=0;i<queryString.length;i++){
                var keyVal = queryString[i].split('=');
                getVars[ keyVal[0] ] = keyVal[1];
            }
        }
        return getVars;
    }
        
        
    // console.log(   GetParams('myTargetScript')   );

Answer 3

Sure. But the only way you can access that parameter though is through server-side. So, make twitter.js a PHP page (using mod_rewrite or whatever) that grabs $_GET['handle'] and then serves itself as Content-Type: text/javascript and just dump the contents of the js.

Answer 4

I can see two solutions here.

First: you can process those GET parameters on the server where the twitter.js is hosted, so that it will dynamically change the js file. For example, you file is:

var handle = {{ handle }};

And your server somehow processes the file, replacing that twitter.js template file dependent on what request was sent.

The second option would be to set the global variables on the page where twitter.js is loaded, like this:

<script type="text/javascript">
    window.twitter_js_handle = 'aplusk';
</script>
<script type="text/javascript" src="http://domain.com/twitter.js" />

And in twitter.js:

var handle = window.twitter_js_handle || null;