web-dev-qa-db-ja.com

JavaScriptを使用して親ウィンドウから別のHTMLページに値を渡す方法は？

ウィンドウが2つあるhome.htmlおよびresult.html。

home.htmlあります<textarea>＃txtinputおよび<button>＃btn。

result.html もうひとつある <textarea>＃txtresult。

オン home.html、＃txtinputに値を入力して＃btnをクリックすると、result.htmlおよび＃txtinputのvalueを＃txtresultに渡します。

私は別の投稿から以下のコードを試しましたが、新しいウィンドウの本文には値が表示されますが、要素には表示されません

var myWindow = window.open();
myWindow.document.body.innerHTML = document.getElementById("txtinput").value;

どういうわけか簡単な方法で可能ですか？私はJavaScriptに比較的慣れていないので、コースは現在進行中であり、JavaScriptの方法を知りたいだけです。詳細なヘルプは非常に高く評価されます！

javascriptwindow.open
10
locknies

以下のコードを詳しく説明する必要があります

ホームページのクリック機能のボタン：

function sample(){
    //this will set the text box id to var id;
    var id = document.getElementById("text_box_id").id;

    //the sessionStorage.setItem(); is the predefined function in javascript
    //which will support for every browser that will store the sessions.
    sessionStorage.setItem("sent", id); 

    //this is to open a window in new tab
    window.open("result.html","_blank");
}

結果ページの値を取得します。

$(document).ready(function(){
    //This sessionStorage.getItem(); is also a predefined function in javascript
    //will retrieve session and get the value;
    var a = sessionStorage.getItem("sent");
    alert(a);
});

SessionStorageの詳細については

私は上記と同じことをしました、素晴らしい新しいウィンドウで値を取得していますが、その値はdocumet.ready（）関数でのみ取得しています。そのため、JSPでこれらの値を使用できません。値を取得したら、JSPに表示する必要があります。

16
vivek

このコードがお役に立てば幸いです

これはホームページにあるはずです：

function sample(id) {
    sessionStorage.setItem("sent", id);
    window.open("result.html","_blank");
}

これは、同じホームページ機能の別の方法です。

function sample() {
    var id=document.getElementById("your_required_id").id;
    sessionStorage.setItem("sent", id);
    window.open("result.html","_blank");
}

これは結果ページにあるはずです：

function sample1() {
    var a=sessionStorage.getItem("sent");
    alert(a);
}

IDはテキストボックスIDの場合があります

2
vivek

result.htmlで、 window.opener を使用して、それを開いたWindowを見つけて、データを取得しますWindow。

window.addEventListener('load', function () { // wait for ready
    var home = window.opener, txtinput, txtresult;
    if (home) {
         txtinput = home.document.getElementById("txtinput");
         txtresult = document.getElementById('txtresult');
         txtresult.value = txtinput.value;
    }
}, false);

home.htmlで、＃btnのクリックをリッスンしてresult.htmlを開きます

// assuming button exists at invocation time
var btn = document.getElementById('btn');
btn.addEventListener('click', function () {
    window.open('result.html');
}, false);
1
Paul S.

子ウィンドウ内からwindow.openerハンドルを使用する単純な割り当てが必要だと思います：

if (window.opener) document.getElementById("#txtresult").value = window.opener.document.getElementById("#txtinput").value;
0
shayuna