Can we refer to JavaScript variables across webpages in a browser session?
Question
Going through w3schools tutorial for JavaScript, found below statement:
A global variable has global scope: All scripts and functions on a web page can access it.
So, my query is, do we have a way to refer to variables declared in a particular webpage?
For example, in C, we have extern keyword, using which we can access the variables which are declared in another file, but we can refer to it in our file.
For example:
Inside script tag of fileA.html, we have declared var x = 50 , outside function() declaration, so it is global wrt fileA.html. If I have fileB.html, can we refer to x from within script tag embodied in fileB.html?
Just to be clear, this is not a scenario of reusing JavaScript files across webpages.
6 answers
solution1
3 2016-03-22 05:26:44
You can use Web Workers ; MessageChannel , see How to clear the contents of an iFrame from another iFrame ; or window.postMessage() to communicate or pass variables between browsing contexts.
An approach utilizing SharedWorker
fileA.html
<!DOCTYPE html>
<html>
<head>
<script src="scriptA.js"></script>
</head>
<body>
<a href="fileB.html" target="_blank">fileB</a>
</body>
</html>
scriptA.js
var x = 50, p;
var worker = new SharedWorker("worker.js");
worker.port.addEventListener("message", function(e) {
alert(e.data);
if (!p) {
p = document.createElement("p");
p.innerHTML = e.data;
document.body.appendChild(p)
}
}, false);
worker.port.start();
console.log("Calling the worker from fileA")
worker.port.postMessage(x); // post `50` to worker
fileB.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="scriptB.js"></script>
</head>
<body>
</body>
</html>
scriptB.js
var x, p;
var worker = new SharedWorker("worker.js");
worker.port.addEventListener("message", function(e) {
if (!x && !p) {
x = e.data; // at `connections`:`1` : `e.data`:`50`
p = document.createElement("p");
p.innerHTML = "Message from fileA:" + x;
document.body.appendChild(p)
}
}, false);
worker.port.start();
console.log("Calling the worker from fileB");
worker.port.postMessage("");
worker.js
self.x = null, connections = 0;
onconnect = function(e) {
var port = e.ports[0];
++connections;
port.addEventListener("message", function(e) {
if (!self.x) {
self.x = e.data;
port.postMessage("Received:" + self.x
+ " from fileA, total connections:"
+ connections);
} else {
port.postMessage("fileB received:" + self.x
+ " total connections:"
+ connections);
}
});
port.start();
}
solution2
0 2016-03-22 05:16:11
lol No. ;)
When the browser navigates away from a page, the global scope and all scripts are completely unloaded before the next page is loaded.
Allowing one page to access another page's variables would be an enormous security hole.
solution3
0 2016-03-22 05:19:24
if your webpages are in the same DOMAIN, they could share a localStorage. you can store strings in localStorage and load them on document ready. You will need to handle concurrency/readwrite issues yourself however.
solution4
0 2016-03-22 05:19:56
By "global" they mean global throughout the particular script in which they are declared. They are destroyed as soon as the script finishes its execution along with all other variables except cookies.
You can do what you are talking about (passing values in-between webpages) through cookies. They are stored on users computers and are not destroyed unless destroyed explicitly or are expired.
solution5
0 2016-03-22 05:21:41
solution6
0 2016-03-22 05:29:25
Yes is kind of "possible", there is a concept call ever cookie , which intent to persist at all cost a cookie even if you change from browser to browser,the idea is to store in any available storage mechanisms in the browser (local storage,cookie, flash cookie, indexDB, etc) the data. So if one of the storage fails, the cookie is copy from one location to another, so meanwhile one storage is alive with the cookie data, this will persist alway. Cross Browser support could works if the user have Flash Local Shared Object cookie
the source: http://samy.pl/evercookie/
Saying that: I don't think is a good idea use this approach, maybe whit a simple localStorage['myvariable'] = {data:"data"} could be sufficient.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.