javascript pass variable to another file

Question

I want to pass a variable to another file but until now I'm not sure what I'm doing wrong.

So lets say in file1.js I have:

$('.selector').on('click', function (e) {
  var getClicked = $(e.currentTarget).find('img').attr('data-type');

  if (getClicked === "360") {
    function detect360Src() {
        var imgUrl = $(this).find('img').attr('src');
    }
    view360.init();
  }
})

Now, I want to pass the variable imgUrl and its value/data to file2.js, inside its init-function:

init: function() {
// imgURL variable/data here
}

How can I achieve that? Thanks in advance

Domino · Accepted Answer · 2015-11-10 13:59:19Z

2

When JS is executed within a browser context, variables declared in the global scope or initialized without declaration (without the var keyword) are stored and read in the window object automatically. So if you create a variable say, at the top of your file, it's still going to be accessible in any other JS code that runs on the page.

However, because such variables pollute the global namespace, it's a good idea to create a container object which will store all shared data. At the top of all files, add something like:

myContainer = myContainer || {};

This creates the myContainer global object if it didn't exist, but it doesn't change anything if it did.

The fact that variables are global by default is why many libraries wrap themselves in a closure. To make sure that none of the variables in your code get overwritten by code from another file, you should do something like this:

myContainer = myContainer || {};

(function(){
    var someVariable; // not accessible in other files
    myContainer.sharedVariable = 10; // accessible in all files
})();

Note that this still isn't "safe" in the sense that myContainer is global and could be overwritten by any code similar to myContainer = something.

edited Nov 10, 2015 at 13:59

answered Nov 10, 2015 at 13:49

Domino

6,8681 gold badge37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Seeker89 Over a year ago

I'd suggest myContainer = myContainer || {}; instead :-)

Domino Over a year ago

@Seeker89 Haha, good catch. I probably shouldn't help people before my first coffee :)

stackoverfloweth · Accepted Answer · 2015-11-10 13:54:56Z

1

if both files belong to the same website try using LocalStorage or SessionStorage

http://www.w3schools.com/html/html5_webstorage.asp

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}

edited Nov 10, 2015 at 13:54

answered Nov 10, 2015 at 13:43

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Comments

David Panart · Accepted Answer · 2015-11-10 13:43:19Z

0

Save the value in the global window variable.

It might not be the most beautifull way, but that is how Meteor.js proceed so...

At least you are sure to be able to check the var existence and reuse it anywhere.

answered Nov 10, 2015 at 13:43

David Panart

6567 silver badges21 bronze badges

Comments

Seeker89 · Accepted Answer · 2015-11-10 13:53:33Z

Long version: Read this document on variable scopes in JavaScript

TL;DR:

The scope of a variable in JavaScript is the function it was declared in (or global scope, if it was declared outside of a body of any function).

So if you have code like this, the lifetime of that variable will be like so:

function detect360Src() {
  var imgUrl = $(this).find('img').attr('src');
  // imgUrl is in the scope
}
// imgUrl is out of scope

If you need to pass a variable between the two files (which itself is a warning sign), you will need to pass by a variable in the global scope.

But to avoid polluting the global namespace, it's a good idea to have your own wrapper (like many JS libs do):

// in the global scope:
var myLibContainer = mylibContainer || {}
// .. in file 1 attach things to it 
lyLibContainer.imgData = ....
// .. in file 2 get access
console.log(myLibContainer.imgData)

Collectives™ on Stack Overflow

javascript pass variable to another file

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related