web-dev-qa-db-ja.com

2つのHTMLページ間で変数を交換する方法は？

example1.htmlとexample2.htmlの2つのHTMLページがあります。

クエリ文字列を使用してexample1.htmlからexample2.htmlに変数を渡し、サーバーサイドコードを使用せずにexample2.htmlでその変数を取得するにはどうすればよいですか？

javascripthtmlquery-stringhref
9
mahesh

Example1.htmlの場合：

<a href='example2.html?myVar1=42'>a link</a>
<a href='example2.html?myVar1=43'>another link</a>

または、必要に応じてJavascriptを使用してリンクを生成します。どういうわけか、？varName = valueがexample2.htmlの最後にあることを確認してください。

次に、example2.htmlで、Javascriptを使用してexample2に付属のクエリ文字列を解析します。

これを行うには、Querystringを試すことができます。

// Adapted from examples on the Querystring homepage.
var qs = new Querystring();
var v1 = qs.get("myVar1");

または、parent.document.URLに、表示しているページの完全なURIが含まれています。あなたはそれを抽出することができます：

parent.document.URL.substring(parent.document.URL.indexOf('?'), parent.document.URL.length);

手動で解析して、エンコードした変数をURIにプルします。

編集：「新しいQuerystring（）」の「新しい」部分を忘れました。おっと...

14
cubic1271

HTML/HTTPはステートレスです。つまり、前のページで行ったこと/見たことは、現在のページとは完全に切り離されています。質問は、フロントエンドの2つのページ間で変数を渡す方法です。 （HTTPはステートレスであるため、ページをロードするたびに、JavaScriptで設定したものの初期値が使用されます。JSでグローバル変数を設定して、ページを再度ロードした後もその値をそのままにすることはできません。

JavaScriptを使用してロード時に値を初期化できるように、値を別の場所に保存する方法はいくつかあります）

1）-任意のブラウザ（Cookie、セッションストレージ、ローカルストレージ-セキュリティ上の理由から1つのドメイン全体で利用可能->このストレージにデータを保存できるのは1つのドメインのみ、別のドメインは可能）を備えたフロントエンドストレージを使用するだけです。 tこのデータにアクセスします）、1つのページに値を入力し、他のページに値を取得します。それを考慮して：

Cookieは、ユーザーが決定した時間までデータを保存します。

Session Storageは、ブラウザのデフォルトタブが閉じるまでデータを保存します。

ローカルストレージは、ブラウザが完全に閉じてタブ（ページ）間でデータを共有するまでデータを保存します。有効期限なしでデータを保存し、JavaScriptまたはブラウザキャッシュ/ローカルに保存されたデータをクリアすることによってのみクリアされます-Cookieの有効期限とは異なります。

2）–Ajaxレンダリング関数を介して生成された要素に属性を追加します

<a href='example2.html?action=getAll&element=product&id=1'>a link</a>
<a href='example2.html?action=getAll&element=product&id=2'>another link</a>

->そしてこの要素をクリックした後、「URL /？ action = getAll＆element = product＆id = 1 "そして、アクションがなくなる2番目のページで、このURLを解析し、適切なパラメーターを使用して適切なAjaxを呼び出すことができます。

7
Musa

Cookieとクエリ文字列を使用して値を交換できます。

2
Pranay Rana