web-dev-qa-db-ja.com

JavaScript変数を別のブラウザーウィンドウに渡すことはできますか？

ポップアップブラウザウィンドウを生成するページがあります。親ブラウザウィンドウにJavaScript変数があり、ポップアップしたブラウザウィンドウにそれを渡したいです。

これを行う方法はありますか？これは同じブラウザウィンドウのフレーム間で実行できることは知っていますが、ブラウザウィンドウ間で実行できるかどうかはわかりません。

javascriptbrowser
66
Tom Kidd

ウィンドウが同じセキュリティドメインからのものであり、他のウィンドウへの参照がある場合は、はい。

Javascriptのopen（）メソッドは、作成されたウィンドウ（または既存のウィンドウを再利用する場合は既存のウィンドウ）への参照を返します。このようにして作成された各ウィンドウは、それを作成したウィンドウを指す「window.opener」に適用されたプロパティを取得します。

次に、DOM（セキュリティ依存）を使用して、他のプロパティ、またはそのドキュメント、フレームなどのプロパティにアクセスできます。

40
MarkR

問題にコードを入れて、親ウィンドウからこれを行うことができます：

var thisIsAnObject = {foo:'bar'};
var w = window.open("http://example.com");
w.myVariable = thisIsAnObject;

またはこれは新しいウィンドウから：

var myVariable = window.opener.thisIsAnObject;

私は後者を好む、なぜならあなたはおそらく新しいページがロードされるのを待つ必要があり、そのためあなたはその要素、またはあなたが望むものにアクセスできるからだ。

99
Victor

はい。スクリプトは、ハンドルを持っている同じドメイン内の他のウィンドウのプロパティにアクセスできます（通常、window.open/openerおよびwindow.frames/parentから取得されます）。通常、変数を直接いじるよりも、他のウィンドウで定義された関数を呼び出す方が管理しやすいです。

ただし、ウィンドウは消滅したり移動したりする可能性があり、ブラウザーはウィンドウが異なる場合にそれを処理します。呼び出す前に、ウィンドウ（a）がまだ開いている（！window.closed）こと、および（b）期待する機能があることを確認してください。

文字列のような単純な値でも構いませんが、一般に、関数、DOM要素、ウィンドウ間のクロージャなどの複雑なオブジェクトを渡すのは得策ではありません。子ウィンドウがオープナーからオブジェクトを保存すると、オープナーが閉じられ、そのオブジェクトは「IE」などの一部のブラウザーで「デッド」になるか、メモリリークを引き起こす可能性があります。奇妙なエラーが発生する可能性があります。

7
bobince

ウィンドウ間で変数を渡す（ウィンドウが同じドメインにある場合）は、次の方法で簡単に実行できます。

  1. クッキー
  2. ローカルストレージ。ブラウザがlocalStorageをサポートしていることを確認し、変数の保守権限（追加/削除/削除）を実行してlocalStorageをクリーンに保ちます。
3
Roman M

変数を渡し、親ウィンドウ内の物への参照を非常に簡単に行うことができます。

// open an empty sample window:
var win = open("");
win.document.write("<html><body><head></head><input value='Trigger handler in other window!' type='button' id='button'></input></body></html>");

// attach to button in target window, and use a handler in this one:
var button = win.document.getElementById('button');

button.onclick = function() {
     alert("I'm in the first frame!");   
}
2
knut

「親」ウィンドウから「子」ウィ​​ンドウにメッセージを渡すことができます。

「親ウィンドウ」で子を開きます

    var win = window.open(<window.location.href>, '_blank');    
       setTimeout(function(){
                    win.postMessage(SRFBfromEBNF,"*")
                  },1000);
    win.focus();

コンテキストに従って置き換えられる

「子供」の中

    window.addEventListener('message', function(event) {
        if(event.srcElement.location.href==window.location.href){
        /* do what you want with event.data */
        }
    });

Ifテストはコンテキストに従って変更する必要があります

2
Brault Gilbert

親ウィンドウで：

var yourValue = 'something';
window.open('/childwindow.html?yourKey=' + yourValue);

次に、childwindow.htmlで：

var query = location.search.substring(1);
var parameters = {};
var keyValues = query.split(/&/);
for (var keyValue in keyValues) {
    var keyValuePairs = keyValue.split(/=/);
    var key = keyValuePairs[0];
    var value = keyValuePairs[1];
    parameters[key] = value;
}

alert(parameters['yourKey']);

キー/値のペアの解析で行うべきエラーチェックが潜在的にたくさんありますが、ここには含めません。誰かが、後の回答でより包括的なJavascriptクエリ文字列解析ルーチンを提供できるかもしれません。

2
Grant Wagner

はい、両方のウィンドウが同じドメインにある限り実行できます。 window.open（）関数は、新しいウィンドウへのハンドルを返します。子ウィンドウは、DOM要素「opener」を使用して親ウィンドウにアクセスできます。

1
Jordan Mack

window.nameをウィンドウ間のデータ転送として使用できます。また、クロスドメインでも機能します。公式にはサポートされていませんが、私の理解では、実際にはクロスブラウザーで非常にうまく機能します。

このStackoverflow投稿の詳細はこちら

0
Brad Parks

または、URLに追加して、スクリプト言語（PHP、Perl、ASP、Python、Rubyなど）で反対側で処理することもできます。何かのようなもの：

var x = 10;
window.open('mypage.php?x='+x);
0
Milan Babuškov

新しく開いたウィンドウに引数を正常に渡すのに苦労しました。
これが私が思いついたものです：

function openWindow(path, callback /* , arg1 , arg2, ... */){
    var args = Array.prototype.slice.call(arguments, 2); // retrieve the arguments
    var w = window.open(path); // open the new window
    w.addEventListener('load', afterLoadWindow.bind(w, args), false); // listen to the new window's load event
    function afterLoadWindow(/* [arg1,arg2,...], loadEvent */){
        callback.apply(this, arguments[0]); // execute the callbacks, passing the initial arguments (arguments[1] contains the load event)
    }
}

サンプルコール：

openWindow("/contact",function(firstname, lastname){
    this.alert("Hello "+firstname+" "+lastname);
}, "John", "Doe");

実例

http://jsfiddle.net/rj6o0jzw/1/

0
singe3