我们可以在浏览器会话中通过网页引用JavaScript变量吗? [英] Can we refer to JavaScript variables across webpages in a browser session?

查看:111
本文介绍了我们可以在浏览器会话中通过网页引用JavaScript变量吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

w3schools tutorial for JavaScript,found below statement:


全局变量具有全局范围:网页上的所有脚本和函数都可以访问它。


所以,我的查询是,我们有办法引用在特定网页中声明的变量吗?



例如,在C中,我们有extern关键字,通过它我们可以访问在另一个文件中声明的变量,但我们可以在我们的文件中引用它。



例如:

在fileA.html的脚本标签中,我们声明了 var x = 50 code>,在 function()声明之外,所以它是全局的wrt fileA.html。
如果我有fileB.html,我们可以从fileB.html中包含的脚本标记中引用x?



只需要清楚,这不是您可以使用 / TR / workers /rel =nofollow noreferrer> Web Workers ; MessageChannel ,请参阅如何清除另一个iFrame的内容iFrame ;或者 window.postMessage() code> 在浏览上下文之间进行通信或传递变量。




利用 SharedWorker

fileA.html

 <!DOCTYPE html> 
< html>
< head>
< script src =scriptA.js>< / script>
< / head>
< body>
< a href =fileB.htmltarget =_ 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(从fileA调用worker)

worker.port.postMessage(x); //将`50`发布到worker

fileB.html

 <!DOCTYPE html> 
< html>
< head>
< link rel =stylesheethref =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 =来自fileA的消息:+ x;
document .body.appendChild(p)
}
},false);
worker.port.start();
console.log(从fileB调用worker);
worker.port.postMessage();

worker.js

  self.x = null,connections = 0; 

onconnect = function(e){
var port = e.ports [0];
++连接;
port.addEventListener(message,function(e){
if(!self.x){
self.x = e.data;
port.postMessage(收到:来自fileA的+ self.x
+,连接总数:
+ connections;
} else {
port.postMessage(fileB received:+ self .x
+总连线:
+连线);
}
});
port.start();
}


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 w.r.t 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.

解决方案

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();
}

这篇关于我们可以在浏览器会话中通过网页引用JavaScript变量吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆