window.openで開いたタブ(ウィンドウ)から親に値を渡したい

Question

以下のように実装してみましたが、うまくいきません。
F12ツールでデバッグしてみると、

window.opener.documentで親の要素に値を設定するときにエラーになっているようですが解決できないので教えてください。

エラー
IE11の場合：未定義または NULL 参照のプロパティ 'value' は取得できません
Chromeの場合：Blocked a frame with origin "null" from accessing a cross origin frame

＜親ウィンドウ＞

<script type="text/javascript"> function pop() { window.open("pop.htm"); } </script> <input type="text" name="name" size="40" maxlength="600" value="山田太郎" id="name"/> <input type="button" onClick="return pop();" value="選択">

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

＜子ウィンドウ＞

<script type="text/javascript"> function set() { window.opener.document.getElementById("name").value = document.getElementById("name").value; quitBox('quit'); } function quitBox(cmd) { if (cmd=='quit'){ //open(location, '_self').close(); this.close(); } return false; } </script>

<button onclick="return set();">セット</button>

以下を参考にしています。
http://browserstrangeness.bitbucket.org/window_close_tester.htm

＊＊＊＊＊＊＊＊＊＊＊＊追記＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
もしかしたら解決したかもしれません。。。
上記はローカルのHTMLをブラウザで表示して確認していたのですが
Webサーバにアップロードして確認したところ、親ウィンドウに値が書き込まれ
子ウィンドウが閉じられました。
でもなぜローカルではうまくいかないのでしょうか？

Answer 1

恐らくローカルにサーバーを立ててテストすれば動作するでしょうね。
重要！ まずは「オリジン」を理解しよう
ローカルファイルで確認した時には「オリジンがないぞ」ってエラーが出るのは不思議ではありません。
(ローカルファイル環境ではlocalStorageが使用できないように)
それがサーバーにアップされたことにより解消されたというわけですね。

ローカルにサーバーを立てて動作確認するように言われるのはこのようにローカルファイルでは動作しない機能などがあり完全なテストができないから(本番に近い環境でテストできないから)という理由もあります。

Comments

[lupus_dingo]

回答ありがとうございます。

＞ローカルにサーバーを立てて動作確認するように言われるのはこのようにローカルファイルでは動作しない機能などがあり完全なテストができないから(本番に近い環境でテストできないから)という理由もあります。
なるほど。勉強になりました。

ちなみにlocalStorageってなんでしょうか？

[Cf_cwd]

JavaScriptで使用できる(KVS形式での)データ保存仕様だと考えていただければ。
これまでcookieを使用していたものはこれからはsessionStorageなどを用いて作られていくようになるんじゃないですかね

参考URL: http://www.htmq.com/webstorage/

[lupus_dingo]

こんな仕組みがあったんですね。初めて知りました。
ブラウザにデータを保持する仕組みはクッキーしかないと思っていました。