Можем ли мы ссылаться на переменные JavaScript на веб-страницах в сеансе браузера?

Пройдя учебник по JavaScript для w3schools, вы найдете следующее заявление:

Глобальная переменная имеет глобальную область действия: все скрипты и функции на веб-странице могут получить к ней доступ.

Итак, мой запрос: есть ли у нас способ ссылаться на переменные, объявленные на определенной веб-странице?

Например, в C у нас есть ключевое слово extern, с помощью которого мы можем получить доступ к переменным, которые объявлены в другом файле, но мы можем обратиться к нему в нашем файле.

Например:

Внутри скрипта тега fileA.html мы объявили var x = 50, вне function() декларация, так что это глобальный файл fileA.html. Если у меня есть fileB.html, можем ли мы сослаться на x из тега script, встроенного в fileB.html?

Просто чтобы прояснить, это не сценарий повторного использования файлов JavaScript на веб-страницах.

6 ответов

Ты можешь использовать Web Workers; MessageChannel см. Как очистить содержимое iFrame от другого iFrame; или же window.postMessage() передавать или передавать переменные между контекстами просмотра.


Подход, использующий 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();
}

Хах нет.;)

Когда браузер отходит от страницы, глобальная область действия и все сценарии полностью выгружаются до загрузки следующей страницы.

Предоставление одной странице доступа к переменным другой страницы было бы огромной дырой в безопасности.

Под "глобальным" они подразумевают глобальный в конкретном сценарии, в котором они объявлены. Они уничтожаются, как только скрипт завершает свое выполнение вместе со всеми другими переменными, кроме файлов cookie.

Вы можете делать то, о чем говорите (передавая значения между веб-страницами) через куки. Они хранятся на компьютерах пользователей и не уничтожаются, если не уничтожены явно или срок их действия истек.

Вы можете использовать LocalStorage и Session Storage для достижения того же.

MDN

W3Schools

Если ваши веб-страницы находятся в одном домене, они могут использовать локальное хранилище. Вы можете хранить строки в localStorage и загружать их в готовый документ. Однако вам придется самостоятельно решать проблемы с параллелизмом и чтением.

Да вроде "возможно", есть концептуальный вызов ever cookie, который намеревается сохранить cookie любой ценой, даже если вы переключаетесь с браузера на браузер, идея заключается в том, чтобы хранить в любых доступных механизмах хранения в браузере (локальное хранилище,cookie, flash cookie, indexDB и т. д.) данные. Таким образом, если происходит сбой одного из хранилищ, cookie копируется из одного местоположения в другое, поэтому, пока одно хранилище заполнено данными cookie, это все равно будет сохраняться. Кросс-браузерная поддержка может работать, если у пользователя есть Flash Local Shared Object cookie

Источник: http://samy.pl/evercookie/

Сказать, что: я не думаю, что это хорошая идея, использовать этот подход, может быть, простой localStorage['myvariable'] = {data:"data"} может быть достаточно.

Другие вопросы по тегам