如何在JavaScript中将变量传输到外部js文件？

Question

Case 1: I have passed a variable to a external js file like this

<script type="text/javascript">

var data1, data2, data3, data4;

function plotGraph() {
    var oHead1 = document.getElementsByTagName('HEAD').item(0);
    var paramScript = document.createElement("script");
    paramScript.type = "text/javascript";
    paramScript.setAttribute('data1', data1);
    paramScript.setAttribute('data2', data2);
    paramScript.setAttribute('data3', data3);
    paramScript.setAttribute('data4', data4);
    oHead1.appendChild(paramScript);
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "js/graph.js";
    oHead.appendChild(oScript);
}
</script>

Case 2: I even tried passing it like this using jquery

<script type="text/javascript">   

    function plotGraph() {
        var data1, data2, data3, data4;
        $.getScript("js/graph.js");
    }
</script>

In the first case which is working but i had to create global variables… I dont want this…

In the second case which is not working has local variables which are not recognized in the js file..

How shall i do it? Any suggestions?

Answer 1

Variables can only be shared between separate scripts if they are:

1. Global variables
2. If they are somehow in the same context (hard with multiple external scripts)
3. If you provide a function in one module that returns access to the variables.
4. If you call the other script and pass the variables or a reference to the variables to the other script.

---

Edit: Now that the OP has explained what they're really trying to do (communicate data from an ajax call to functions in an external script), the real answer to this issue is this:

You should call a global function in your external script FROM the success handler of the ajax call and pass these data elements to that function. The function in the external script can then either act on the data immediately or save the data in it's own variables for later use.

---

FYI: $.getScript() loads a script at the global level. That's why your case 2 doesn't work.

One way to share access to a group of variables is to put them all as properties of an object and then either make that object be global or provide a global function that retrieves access to that object. For example, you could declare a single global object with a number of properties.

var myConfigObject = {
    data1: value1,
    data2: value2,
    data3: value3,
    data4: value4
};

---

To call a function in your external script file, you would do the following:

1. Define a globally accessible function in your external script file. Let's call it doIt(a, b, c, d) - a function that four arguments.
2. Then, in your ajax call where you have your data values available, you just call doIt() and pass it the desired data values doIt(3, "foo", data4, whatever) .
3. Then, in the implementation of doIt(a, b, c, d) , you have available those four data values that were passed to it.

So, in your external file, you'd have this:

function doIt(a, b, c, d) {
    // do whatever doIt wants to do
    // use the arguments passed to this function
}

In your main index.html file, you'd have an ajax call:

$.ajax(..., function(data) {
    // process the returned data from the ajax call
    // call doIt
    doIt(3, "foo", data4, whatever);

});

Answer 2

Your code which does paramScript.setAttribute('data1', data1); etc is unnecessary. It just means that in the HTML that snippet generates looks like <script type="text/javascript" data1="data1" data2="data2"...

I think global variables is your option really. However, you could create a global namespace instead:

var scriptParams = {};
scriptParams.data1 = 'data1';
scriptParams.data2 = 'data2';

etc. This would be cleaner as you would only have a single object at the top level of global scope.