web-dev-qa-db-ja.com

複数のファイルにわたるJavascriptのグローバル変数

私のJavaScriptコードは、helpers.jsという外部ファイルにあります。このJavaScriptコードを呼び出すHTML内では、helpers.jsから特定の関数が呼び出されたかどうかを知る必要があります。

以下を定義してグローバル変数を作成しようとしました。

var myFunctionTag = true;

私のHTMLコードとhelpers.jsの両方のグローバルスコープ。

私のhtmlコードは次のようになります。

<html>
...
<script type='text/javascript' src='js/helpers.js'></script>    
...
<script>
  var myFunctionTag = false;
  ...
  //I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js
</script>

私がやろうとしていることは実行可能ですか？

javascriptscopeglobal-variablesglobal
114
Goro

Helpers.jsファイルを含める前に、変数を宣言する必要があります。 helpers.jsのインクルードの上にスクリプトタグを作成し、そこで定義するだけです。

<script type='text/javascript' > 
  var myFunctionTag = false; 
</script>
<script type='text/javascript' src='js/helpers.js'></script>     
... 
<script type='text/javascript' > 
  // rest of your code, which may depend on helpers.js
</script>
112
tvanfosson

変数は.jsファイルで宣言し、HTMLファイルで単純に参照できます。 helpers.jsの私のバージョン：

var myFunctionWasCalled = false;

function doFoo()
{
    if (!myFunctionWasCalled) {
        alert("doFoo called for the very first time!");
        myFunctionWasCalled = true;
    }
    else {
        alert("doFoo called again");
    }
}

そしてそれをテストするページ：

<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>

<body>


<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

<script type="text/javascript">doFoo();</script>

<p>Some stuff in between</p>

<script type="text/javascript">doFoo();</script>

<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>

</body>
</html>

テストalert()が2つの異なるものを表示し、ページに書き込まれる値が2回目に異なることがわかります。

16
Stephen P

OK、みんな、ここに私の小さなテストもあります。同様の問題があったため、3つの状況をテストすることにしました。

  1. 1つのHTMLファイル、1つの外部JSファイル...それはまったく機能しますか？関数はグローバル変数を介して通信できますか？
  2. 2つのHTMLファイル、1つの外部JSファイル、1つのブラウザー、2つのタブ：グローバル変数を介して干渉しますか？
  3. 2つのブラウザーで開いた1つのHTMLファイルは機能しますか？

すべての結果は予想通りでした。

  1. できます。関数f1（）およびf2（）は、グローバルvarを介して通信します（varはHTMLファイルではなく外部JSファイルにあります）。
  2. 干渉しません。ブラウザーのタブごと、HTMLページごとに、明らかにJSファイルのコピーが作成されています。
  3. 予想どおり、すべてが独立して動作します。

チュートリアルを参照する代わりに、試してみるのが簡単だと感じたので、試してみました。私の結論：HTMLページに外部JSファイルを含めると、ページがレンダリングされる前に、外部JSのコンテンツがHTMLページに「コピー/貼り付け」されます。または、必要に応じてPHPページに移動します。 ここで間違っている場合は修正してください。ありがとう。

私のサンプルファイルは次のとおりです。

外部JS：

var global = 0;

function f1()
{
    alert('fired: f1');
    global = 1;
    alert('global changed to 1');
}

function f2()
{
    alert('fired f2');
    alert('value of global: '+global);
}

HTML 1：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>

HTML 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>
15
Martin

こんにちは、1つのjsファイルから別のjsファイルに値を渡すには、ローカルストレージの概念を使用できます

<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

Two.jsファイル

function myFunction() {
var test =localStorage.name;

 alert(test);
}

Three.jsファイル

localStorage.name = 1;
1
Sajith

// Javascriptファイル1

localStorage.setItem('Data',10);

// Javascriptファイル2

var number=localStorage.getItem('Data');

htmlのJSファイルをリンクすることを忘れないでください：）

0
MrJ

グローバル変数ではなく、「ローカルストレージ」を使用する必要があると思います。

「ローカルストレージ」が非常に古いブラウザでサポートされない可能性がある場合は、「ローカルストレージ」の可用性を確認し、利用できない場合は他の方法を使用する既存のプラグインの使用を検討してください。

http://www.jstorage.info/ を使用しましたが、これまでのところ満足しています。

0
paulo62

次のようなjsonオブジェクトを作成できます。

globalVariable={example_attribute:"SomeValue"};

fileA.jsで

FileB.jsから次のようにアクセスします：globalVariable.example_attribute

0
partizanos