Can we refer to JavaScript variables across webpages in a browser session?

by

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="https://stackoverflow.com/questions/36146595/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="https://stackoverflow.com/questions/36146595/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();
}

More Related Contents:

  1. Close ad to continue as free user?
  2. How do I retrieve an HTML element’s actual width and height?
  3. Show/hide ‘div’ using JavaScript
  4. Good tutorial for using HTML5 History API (Pushstate?) [closed]
  5. How can get the text of a div tag using only javascript (no jQuery)
  6. How can I set focus on an element in an HTML form using JavaScript?
  7. How to display JavaScript variables in a HTML page without document.write
  8. How to make a link open multiple pages when clicked
  9. script tag create with innerHTML of a div doesn’t work
  10. HTML selected option background-color CSS style
  11. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  12. How to get the position of text within an element?
  13. How can I copy rich text contents to the clipboard with JavaScript?
  14. How can I sort elements by numerical value of data attribute?
  15. jQuery (almost) equivalent of PHP’s strip_tags()
  16. How to find the size of localStorage
  17. Any event triggered on autocomplete?
  18. “pointer-events: none” does not work in IE9 and IE10
  19. What tag in HTML should I use without special meaning, only to carry meta data?
  20. Detect if user clicks inside a circle
  21. Set custom header for the request made from tag
  22. Iframe.readyState does not work in chrome
  23. getElementsByClassName() with two classes
  24. Attribute onclick=”function()” not functioning as intended?
  25. How to trigger CSS “hover state” using Javascript? [duplicate]
  26. Iframe inherit from parent
  27. Reading multiple files with Javascript FileReader API one at a time
  28. Checking if a textbox is empty in Javascript
  29. Rename Object Key in an array using javascript
  30. trigger file upload dialog using javascript/jquery

Leave a Comment