将变量从一个javascript文件传递到另一个javascript文件

Question

This is my small code snippet to send the request message to the server and get back the response and prints it. It's a chrome add-on but the thing is if any onClick operations will happen on the browser then it will grab the url and has to send to the another JavaScript file then this JavaScript file is responsible for sending url to the node.js server

the url.js(which grabs the url on click) file is :

$(document).click(function (e) {

    if ($(e.target).closest('a').length) {
        // I want this url variable to be transferred from here to the below
        // JavaScript file
        var url = $(e.target).closest('a').attr('href');
    } else {
        alert('You did not click a link');
    }
});

and the other javascript file which takes the parameter is :

window.WebSocket = window.WebSocket || window.MozWebSocket;
var connection = new WebSocket('ws://localhost:1337');

connection.onopen = function () {
    connection.send(url);
    connection.send("http://static.adzerk.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg");
};

connection.onerror = function (error) {
    alert("something went wrong with your server  " + error);
};

connection.onclose = function () {
    alert("server had shut down now ");
};

connection.onmessage = function (message) {

    try {
        var json = JSON.parse(message.data);
    } catch (e) {
        console.log('This doesn\'t look like a valid JSON: ', message.data);
        return;
    }
    if (json.type === 'message') {

        addMessage(json.data.text);

    } else {
        console.log('Hmm..., I\'ve never seen JSON like this: ', json);
    }
};

function addMessage(message) {

    var rec_object = message;
    var regexp1 = /[\/a-zA-Z]+(.jpg)/;
    var regexp2 = /[\/a-zA-Z]+(.mp3)/;
    var regexp3 = /[\/a-zA-Z]+(.mp4)/;
    if (regexp1.test(rec_object)) {
        document.write("<img width=\"300\" height=\"250\" src=\"" + rec_object + "\" \/>")
        document.write("<br /><br /><br /><br /><br /><br /><br /><br />");
    } else
    if (regexp2.test(rec_object)) {
        document.write("<audio controls>");
        document.write("<source src=\"" + rec_object + "\"type=audio\/mpeg \/>");
        document.write("</audio>");
        document.write("<br /><br /><br /><br /><br /><br /><br /><br />");
    } else
    if (regexp3.test(rec_object)) {
        document.write("<video width=\"300\" height=\"250\" controls>")
        document.write("<source src=\"" + rec_object + "\"type=video\/mp4 \/>");
        document.write("</video>");
    } else
        document.write(rec_object);

}

So how can I do it with out using query string? I just want to send it from one file to another file. I tried like above but I was not getting anything.

Answer 1

In place of the following:

var url = $(e.target).closest('a').attr('href');

use a global variable:

window.url = $(e.target).closest('a').attr('href');

Then, in your other file also, use connection.send(window.url) . This will get you going but read below.

Note:: Using global variables is a very bad practice. Ideally, I'd restructure your code to create a Connection object with a property named url which is instantiated from within the callback and then you can simple call whatever methods you want to call on it. All its methods will work with the local variable url .