javascript - ある HTML ファイルから別の HTML ファイルにデータを転送する

Question

私はHTMLとJavaScriptが初めてです。私がやろうとしているのは、HTMLファイルからそこに設定されているものを抽出し、JavaScriptを介して別のHTMLファイルに表示したいということです。

これをテストするためにこれまでに行ったことは次のとおりです
。

<html>
<head>
   <script language="javascript" type="text/javascript" src="asd.js"></script>
</head>

<body>

<form name="form1" action="next.html" method="get">
name:<input type ="text" id="name" name="n">
<input type="submit" value="next" >
<button type="button" id="print" onClick="testJS()"> Print </button>
</form>

</body>
</html>

next.html

<head>
   <script language="javascript" type="text/javascript" src="asd.js"></script>
</head>

<body>

<form name="form1" action="next.html" method="get">
<table>
    <tr>
        <td id="here">test</td>
    </tr>
</table>
</form>

</body>
</html>

asd.js

function testJS()
{

var b = document.getElementById('name').value

document.getElementById('here').innerHTML = b;

}

test.html-> ads.js(test.html から値を抽出し、next.html に設定します) ->next.html

score 40 · Accepted Answer

このコードを試してください: testing.html 内

function testJS() {
    var b = document.getElementById('name').value,
        url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);

    document.location.href = url;
}

そして next.html で:

window.onload = function () {
    var url = document.location.href,
        params = url.split('?')[1].split('&'),
        data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
         tmp = params[i].split('=');
         data[tmp[0]] = tmp[1];
    }
    document.getElementById('here').innerHTML = data.name;
}

説明: JavaScript は異なるページ間でデータを共有できないため、いくつかのソリューションを使用する必要があります。たとえば、URL get params (私のコードではこのように使用しました)、cookie、localStorage などです。name パラメータを URL に保存します (?name= ...) および next.html で URL を解析し、前のページからすべてのパラメーターを取得します。

PS。私は英語を母国語としないのですが、必要に応じて私のメッセージを修正してください

score 22 · Accepted Answer

ページ間で持続するグローバル変数を設定する昔ながらの方法は、データを Cookie に設定することです。最新の方法は、ブラウザーのサポートが良好なローカルストレージを使用することです (IE8 以降、Firefox 3.5 以降、Chrome 4 以降、Android 2 以降、iPhone 2 以降)。localStorage の使用は、配列を使用するのと同じくらい簡単です。

localStorage["key"] = value;

... in another page ...
value = localStorage["key"];

イベント API はブラウザーによって若干異なりますが、イベントハンドラーをアタッチして変更をリッスンすることもできます。トピックの詳細。

score 12 · Accepted Answer

ブラウザ環境でこの js について話していると仮定すると (nodejs のような他のものとは異なり)、残念ながら、これが本来の動作方法ではないという理由だけで、あなたがやろうとしていることは不可能だと思います。

HTML ページは、「ステートレス」プロトコルである HTTP プロトコルを介してブラウザに配信されます。ページ間で値を渡す必要がある場合は、次の 3 つの方法があります。

セッションクッキー
HTML5 ローカルストレージ
windowURLに変数をPOSTし、オブジェクトを介してnext.htmlでそれらを取得します

score 5 · Accepted Answer

最初にスクリプトタグにwindow.location.href送信する値を保存して、変数を使用してデータを送信するだけですtesting.html

<script> 
  var data = value_to_send
  window.loaction.href="next.htm?data="+data
</script>

これはgetリクエストを介して送信しています

score 0 · Accepted Answer

<html>
<head>
<script language="javascript" type="text/javascript" scr="asd.js"></script>
</head>

<body>

<form name="form1" action="#" method="get">
name:<input type ="text" id="name" name="n">
<input type="submit" value="next" >
<button type="button" id="print" onClick="testJS()"> Print </button>
</form>

</body>

クライアント側のスクリプト

function testJS(){
var name = jQuery("#name").val();
jQuery.load("next.html",function(){
jQuery("#here").html(name);
});
}

jQuery は js ライブラリであり、プログラミングを簡素化します。したがって、js よりも jQuery を使用することをお勧めします。ここでは、送信ボタンのクリックイベントで入力要素 (id = name) の値を取得し、目的のページ (next.html) をロードしました。ロード関数が正常に実行された場合は、データを目的の場所に配置する関数を呼び出しています。

jquery ロード関数http://api.jquery.com/load/

score 0 · Accepted Answer

以下は、html を使用してあるページから別のページに値を渡すサンプルコードです。ここでは、page1 のデータが page2 に渡され、javascript を使用して取得されます。

1) page1.html

<!-- Value passing one page to another 
     Author: Codemaker
-->
<html>
    <head>
        <title> Page 1 - Codemaker</title>
    </head>
    <body>
        <form method="get" action="page2.html">
            <table>
                <tr>
                    <td>First Name:</td>
                    <td><input type=text name=firstname size=10></td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td><input type=text name=lastname size=10></td>
                </tr>
                <tr>
                    <td>Age:</td>
                    <td><input type=text name=age size=10></td>
                </tr>
                <tr>
                    <td colspan=2><input type=submit value="Submit">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

2) page2.html

<!-- Value passing one page to another 
     Author: Codemaker
-->

<html>
    <head>
        <title> Page 2 - Codemaker</title>
    </head>
    <body>
        <script>
            function getParams(){
                var idx = document.URL.indexOf('?');
                var params = new Array();
                if (idx != -1) {
                    var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
                    for (var i=0; i<pairs.length; i++){
                        nameVal = pairs[i].split('=');
                        params[nameVal[0]] = nameVal[1];
                    }
                }
                return params;
            }
            params = getParams();
            firstname = unescape(params["firstname"]);
            lastname = unescape(params["lastname"]);
            age = unescape(params["age"]);
            document.write("firstname = " + firstname + "<br>");
            document.write("lastname = " + lastname + "<br>");
            document.write("age = " + age + "<br>");
        </script>
    </body>
</html>

javascript - ある HTML ファイルから別の HTML ファイルにデータを転送する

9 に答える 9

Related

Reference