/    Sign up×
Community /Pin to ProfileBookmark

Load external JS file from QueryString contents?

Is is possible to load different external JS files
based upon the contents of a querystring?

So instead of creating multiple copies of a main program
to call the different external files, use a common main program
that decodes the querystring passed to the program.

I’m thinking along these lines…

[code]
<!– NOTE: only 1 of the following is needed at any particular execution
<script type=”text/javascript” src=”pmp1.js”></script>
<script type=”text/javascript” src=”pmp2.js”></script>
<script type=”text/javascript” src=”pmp3.js”></script>
<script type=”text/javascript” src=”pmp4.js”></script>
–>
<script type=”text/javascript”>
//<![CDATA[

var qry = window.location.search.substr(1);
// the query String to split with qry.split(‘&’) and in a loop with .split(‘=’) to read the values
// from: mainPgm.html&extFile=pmp1.js
// or: mainPgm.html&extFile=pmp4.js

var qryArr = qry.split(‘&’);
var extJSarr = [];
var extJS = ”;
if (qryArr.length < 1) { extJS = ‘pmp0.js’; } // default
else {
extJSarr = qryArr[1].split(‘=’);
if (extJSarr[1] != undefined) { extJS = extJSarr[1]; }
else { extJS = ‘pmp0.js’; } // default
}

[COLOR=”Red”]// Now somehow use ‘extJS’ to load the external JS file ‘pmp1.js’ or ‘pmp4.js’?
// contents of ‘extJS’ to be used in the rest of the program
// …..
[/COLOR]
</script>
[/code]

Would this be possible?

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@rtretheweyMar 31.2012 — Sure. Just use document.write() to create the <script> tag based on the parameters in the query string.
Copy linkTweet thisAlerts:
@_Krik_Mar 31.2012 — 
// the query String to split with qry.split('&') and in a loop with .split('=') to read the values
[/QUOTE]

That almost sounds like your trying to dynamically get values based upon a query. If so wouldn't XMLHttpRequest (AJAX) work better.

Also, why not just load all the javascript at once. Just place the different blocks of code in their own functions. The js files would have to be huge for this not to be option.
[CODE]
function pmp0()
{
this.subpmp0 = function()
{
//some code here
}
}
function pmp1()
{
// example of how to access the subpmp0 funciton
pmp0.subpmp0();
}
function pmp2()
{
// ect.
}
function pmp3()
{
// ect.
}
function pmp4()
{
// ect.
}
[/CODE]

Lastly here's an article I read a while back about a technique that Facebook is using called Asynchronous Script Loading. Maybe it will help also.
Copy linkTweet thisAlerts:
@Angry_Black_ManMar 31.2012 — Is is possible to load different external JS files

based upon the contents of a querystring?[/QUOTE]


document.write is only useful if the page hasn't finished loading. this typically is not the solution people can or mean to properly implement.

AJAX is great for retrieving information from external files, but in this case, it would just add an unnecessary additional step to the OPs requirement.

the most efficient way to do what OP is asking is to get the URL to the JS file using the querystring, and then dynamically insert the script into the webpage someplace (header, body, whereever.. it's all good).

example: http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
Copy linkTweet thisAlerts:
@JMRKERauthorMar 31.2012 — document.write is only useful if the page hasn't finished loading. this typically is not the solution people can or mean to properly implement.

AJAX is great for retrieving information from external files, but in this case, it would just add an unnecessary additional step to the OPs requirement.

the most efficient way to do what OP is asking is to get the URL to the JS file using the querystring, and then dynamically insert the script into the webpage someplace (header, body, whereever.. it's all good).

example: http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS[/QUOTE]


Thanks, ABM, I'll give that link a try. ?

To the other posters:

1. document.write() will not work in my case. It is a dynamic site and does change during the time the user has control.

  • 2. Each external file contains the same variable names, just different contents. I only intend to load one of the external files at a time, but needed a method to load it based upon the name of the external file that I want to pass to the main program script.


  • 3. I could use ajax, and may do so in the future, but at this time it is much easier to select which external file contents to display using the instructions in the common main program.


  • 4. I don't like bloated code so loading all the external files and chosing which to display would be a waste, IMHO.


    Also, since I use duplicate variable names in each of the external files, only the last one loaded would be recognized.
  • Copy linkTweet thisAlerts:
    @nap0leonApr 01.2012 — Are you limited to straight HTML or can you do it in a server side language?

    e.g., Classic ASP
    <i>
    </i>&lt;&amp;#37;
    Dim JSver
    JSVer = Request.QueryString("js")
    If JSVer &gt; 0 AND JSVer &lt; 5 Then
    'nothing
    Else
    JSVer = 0
    End If
    %&gt;
    &lt;script type="text/javascript" src="pmp&lt;%=JSVer%&gt;.js"&gt;&lt;/script&gt;


    If server side is not available to you and you are using jQuery... you'll need to determine which version of pmp.js to load, but can load the JS file this way once you've determined the version. (replace 'pmp.js' with the call to the function that determines the version to load)
    <i>
    </i> &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
    $.getScript('pmp.js', function() {
    //anything you want to happen after it loads, or nothing at all
    });
    });

    &lt;/script&gt;
    Copy linkTweet thisAlerts:
    @JMRKERauthorApr 01.2012 — I would love to use a server-side solution, but this is not an option for me on the university.edu space allotted to me. (IT is paranoid about security by non-IT faculty)

    JQuery seems sort of bloated for this one task I need. (But I'll keep it in mind)
    Copy linkTweet thisAlerts:
    @Troy_IIIApr 01.2012 — The thing you are asking for was (until very recently) one of the easiest tasks to carry out with javascript & in cross-browser manner.

    You would only need to hard-code one script element and give it an id, f.i.: "dynload" to be able to assign:
    [CODE]dynload.src = extJS;[/CODE]
    on the fly and it would work perfectly and as expected.

    But some recent browsers have flagged its src property so it can only load a single resource and on top of that only once.

    Although some browsers might still support it, - from now on, you will be forced to generate a separate script element for each, or hard-code for each resource you might have. (Which was -by the way, a terrible thing to do for no matter what excuse).

    Anyway, you can chose from two options available :

    1. hard-code script elements without src value and assign later through script, or

    2. create assign and append new script elements to the document as needed and/or when all in one turn.
    ×

    Success!

    Help @JMRKER spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 4.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...