ここから本文です

html,javascriptについて質問です。 ある画面のhtmlで得た変数を他のhtmlに飛び、...

アバター

ID非公開さん

2018/7/3109:09:14

html,javascriptについて質問です。
ある画面のhtmlで得た変数を他のhtmlに飛び、その際にその変数を使う方法を教えてください。

流れとして
TEST.html でA=3と変数を作り
sample.html でB=A+Aを計算する。
画面遷移はwindow.open("○○");を使います。

閲覧数:
117
回答数:
2
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2018/7/3118:13:50

いくつも方法はありますが
一応4通り(4組み合わせ)の例を回答します。

「a1.html」と「b1.html」,
「a2.html」と「b2.html」,
「a3.html」と「b3.html」
「a4.html」と「b4.html」は,
それぞれ同じフォルダにあるものとします。

また
「a1.html」からは「b1.html」を,
「a2.html」からは「b2.html」を,
「a3.html」からは「b3.html」を,
「a4.html」からは「b4.html」を,
それぞれ window.open() で開くものとします。



【例1】========================


◎「a1.html」例↓

<html>
<head>
<title>Page A1</title>
<script>
var v = 5;
window.open("b1.html?"+v ,"winB1", "width=400, height=300");
</script>
</head>
<body>
<p>[a1.html]</p>
</body>
</html>



◎「b1.html」例↓

<html>
<head>
<title>Page B1</title>
<script>
function getQuery(){
    alert(location.search.substr(1));
    alert(typeof(location.search.substr(1)));
}
</script>
</head>
<body>
<p>[b1.html]</p>
<input type="button" value="Get" onclick="getQuery()">
</body>
</html>



【例2】========================


◎「a2.html」例↓

<html>
<head>
<title>Page A2</title>
<script>
var v = 5;
window.open("b2.html","winB2", "width=400, height=300");
</script>
</head>
<body>
<p>[a2.html]</p>
</body>
</html>



◎「b2.html」例↓

<html>
<head>
<title>Page B2</title>
<script>
function getOpenerVal(){
    alert(window.opener.v);
    alert(typeof(window.opener.v));
}
</script>
</head>
<body>
<p>[b2.html]</p>
<input type="button" value="Get" onclick="getOpenerVal()">
</body>
</html>



【例3】========================


◎「a3.html」例↓

<html>
<head>
<title>Page A3</title>
<script>
var v = 5;
var w = window.open("b3.html" ,"winB3", "width=400, height=300");
w.v = v;
</script>
</head>
<body>
<p>[a3.html]</p>
</body>
</html>



◎「b3.html」例↓

<html>
<head>
<title>Page B3</title>
<script>
function getVal(){
    alert(v);
    alert(typeof(v));
}
</script>
</head>
<body>
<p>[b3.html]</p>
<input type="button" value="Get" onclick="getVal()">
</body>
</html>



【例4】========================

◎「a4.html」例↓

<html>
<head>
<title>Page A4</title>
<script>
window.name = "winA4";
var v = 5;
var w = window.open("b4.html" ,"winB4", "width=400, height=300");
</script>
</head>
<body>
<p>[a4.html]</p>
</body>
</html>



◎「b4.html」例↓

<html>
<head>
<title>Page B4</title>
<script>
function getWinA4Val(){
    var wa4 = window.open("","winA4");
    alert(wa4.v);
    alert(typeof(wa4.v));
}
</script>
</head>
<body>
<p>[b4.html]</p>
<input type="button" value="Get" onclick="getWinA4Val()">
</body>
</html>

------------------------------------------


なお
ローカル環境で「Chrome」を使って上のサンプルを試した場合,
セキュリティの都合上【例2】~【例4】は動作しないと思います。
(ネットにアップすれば「Chrome」でも動作すると思います。)

  • アバター

    質問者

    ID非公開さん

    2018/8/109:47:47

    ありがとうございます。
    2つ以上の変数を受け渡す場合はどのようにするのでしょうか
    例1の方で教えていただけると幸いです。

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この回答は投票によってベストアンサーに選ばれました!

ベストアンサー以外の回答

1〜1件/1件中

nec********さん

2018/7/3113:27:37

open使用なら

親jsからchild.htmlにa=3、b=日本語を渡すとして

window.open("./sample.html?a="+"3"+"&b="+"日本語");


sample.html-------------------------------------------

<script>
//デコード作業
let str = decodeURIComponent(location.search.substring(1));
//引数分割
let obj = str.split('&');
//適当な表示確認
if(obj != ''){
for(let i=0; i<obj.length; i++){
document.writeln(i + 1 + '番目: ' + obj[i] + '<br>');
}
}
</script>

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる