将参数传递给文档就绪的.js文件

Question

I have seen several people ask parts of this question and tried the various solutions but nothing seems to work. I'm not sure if it's the combination or something else in my project that is causing it to not work.

In my project I have various pages that display similar DataTables. I'm wanting to put the initialisation of these tables in one file to save duplication. But I would like to pass in parameters to account for the minor differences between eg column headers. Just to complicate it the initialisation is unsurprisingly done on document.ready.

Things I have tried:
Pass vars to JavaScript via the SRC attribute
http://feather.elektrum.org/book/src.html

In the code example below I never hit the second alert. What I want if for it to hit the second and third alerts and for the contents of test_var to be correct:

(cs)html file

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        $.getScript("TestScript.js"); // Tried different paths to the file here as well
    });
</script>

TestScript.js

alert("In the TestScript");
alert("Test variable is: " + test_var);

Perhaps I'm going about it all wrong and there is a different/simpler way to achieve the passing of parameters to a script (file) during document.ready

Answer 1

A simplest way to do it would be (Assuming that variable name test_var is not a global variable or built-in property/method already)

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        window.test_var = "Hopefully this has worked";
        $.getScript("TestScript.js"); // Tried different paths to the file here as well
    });
</script>

Above I assumed that test_var will be defined inside document.ready only. Otherwise, if it was a global variable, then it can be accessed without window .

And in your TestScript.js , simply delete the variable after it has been consumed

alert("In the TestScript");
alert("Test variable is: " + test_var);
delete window.test_var;

Answer 2

$(document).ready(function () {
    test_var = "Hopefully this has worked";
    $.getScript("TestScript.js"); // Tried different paths to the file here as well
});

Answer 3

Unfortunately you cannot pass parameters to a JS file through the URL as the request to retrieve the file is not available from within JS code.

Instead you can declare variables before you include the JS file in the page which can then be read in it, something like this:

foo.html

<script>
    var test_var = "Hopefully this has worked";
</script>
<script src="testscript.js"></script>

testscript.js

console.log(test_var); // = "Hopefully this has worked"

Answer 4

You need to wrap your code in a function:

function testScript(test_var) {
    alert("In the TestScript");
    alert("Test variable is: " + test_var);
}

And then you can use it like this:

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        $('<script>')
            .attr('type', 'text/javascript')
            .attr('href', 'TestScript.js')
            .appendTo('head');
        testScript(test_var);
    });
</script>

Answer 5

I think this should solve your problem. Include the TestScript.js in the html page.

(cs)html file

<script>
    $(document).ready(function () {
        var test_var = "Hopefully this has worked";
        alert("Pre TestScript");
        executeCommonScript();
    });
</script>

TestScript.js

function executeCommonScript(){
   alert("In the TestScript");
   alert("Test variable is: " + test_var);
}

Answer 6

In addition to the other great solutions that have been proposed so far, a different option is to put the variables you need defined somehow in your HTML, eg as data-attributes,

Since you're using jQuery anyway something like this would work:

 $(document).ready(function() { var test_var = $('.data-container').data('test-var'); alert('Don\\'t be alarmed: '+test_var); }); 

 .data-container { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="data-container" data-test-var="This is just a test"></div> 

You can access these data-attributes in any file you include, so you wouldn't have to worry about passing variables back and forth.

Of course this solution makes the most sense if you don't add a div just to hold your variables, but add data-attributes to those elements that will actually be affected by the variables

Answer 7

Many people correctly answered my question, thank you all. The problem I was having in getting it to work was that my script file that I was trying to pass parameters in to was in my Views/Shared folder which as outlined here is blocked.

Once I moved my script out of the Views folder it all worked fine. And in addition to the above answers the simplest I found was this