Question

我的问题是如何在两个不同的javascript文件之间共享变量。我正在创建一个表单，将值传输到另一个页面，该页面会警告该变量。我有2个html文件（index.html和form.html）以及2个javascript文件（form.js和index.js）。所以我基本上想要将变量theNick从form.js共享到index.js以使用alert（）显示它。如果这是不可能的，还有另一种方法吗？

form.html：

<input type="text" id="Nick" placeholder="Nickname">
<a id="btn" onclick="submit()" href="index.html.">Submit</a>

form.js：

function submit(){
     var theNick = document.getElementById("Nick").value; //retrieves theNick from your input
     ???

}

的index.html：

<button onclick="callNick()">Click Me to view your Nickname.</button>

index.js：

function callNick(){
    ???????
    alert(theNick); //I want to get access to this variable from form.js
}

Answer 1

使用var keyword，你正好相反。如果你想分享一些东西，最简单的方法是将变量绑定到window object，如下所示：window.theNick = ...并像alert(window.theNick)一样使用它。

Answer 2

你可以在函数

之外声明变量

var theNick; // you could omit this entirely since it will be declared in 
             // global scope implicitly when you try to assign it in the function
function submit(){
    theNick = document.getElementById("Nick").value; //retrieves theNick from your input
}

javascript并不关心在哪个文件声明中，而是在哪个范围内。

通过将变量放在全局范围内，您将能够在任何地方访问它。

全局变量不是最好的编码策略，但这可以帮助您理解

Answer 3

有点可能。

首先，您需要确保HTML加载两个JavaScript文件。他们没有办法互相导入，因此HTML必须加载两个脚本。

其次，您需要修改函数submit以使用全局变量。全局变量最初在函数范围之外定义。函数callNick已经在寻找全局变量。

但是，submit函数定义了自己的局部变量，因为在函数范围内使用了关键字var。像这样改变：

// Set global variable 
var theNick;

function submit(){
      // Use global variable 
      theNick = document.getElementById("Nick").value; //retrieves theNick from your input
      ???

}

有关详细信息，请参阅此文章。 http://www.w3schools.com/js/js_scope.asp

Answer 4

您可以使用?yourVar= GET标记将变量传递到网址：

<强> form.js

function submit(e){
     var theNick = document.getElementById("Nick").value; //retrieves theNick
     e.target.href+='?n='+theNick; // set the href of your anchor with your variable
}

<强> form.html

<input type="text" id="Nick" placeholder="Nickname">
<!-- We pass the event object into our function as a parameter -->
<a id="btn" onclick="submit(event)" href="index.html">Submit</a>

<强> index.js

function callNick(){
    // get the variable from the current location
    var theNick = window.location.href.split('?n=')[1];
    alert(theNick);
}

<强>的index.html

<button onclick="callNick()">Click Me to view your Nickname.</button>

▶︎ Plunker _{其中“form”已更改为“index”，“index”更改为“result”。}

注意：
要传递多个变量，您可以使用&分隔符，然后像this CSS-tricks article中一样使用window.location.search属性。
▶︎ Multiple vars plunker

Answer 5

您似乎需要将变量存储在窗口对象的本地存储对象中，这样您就可以在第一页上设置其值并在第二页上检索它。

第1页

window.localStorage.setItem("yourVariable", "yourValue");

第2页

var myVar = localStorage.getItem("yourVariable");

只有一个警告＆＃39;：这是一个html5功能，因此它有一些限制，请查看此link以获取更多信息。

从Javascript文件中检索变量

5 个答案: