window.openで開いたタブ(ウィンドウ)から親に値を渡したい
- 評価
- クリップ 1
- VIEW 9,291
以下のように実装してみましたが、うまくいきません。
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サーバにアップロードして確認したところ、親ウィンドウに値が書き込まれ
子ウィンドウが閉じられました。
でもなぜローカルではうまくいかないのでしょうか？
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サーバにアップロードして確認したところ、親ウィンドウに値が書き込まれ
子ウィンドウが閉じられました。
でもなぜローカルではうまくいかないのでしょうか？
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
恐らくローカルにサーバーを立ててテストすれば動作するでしょうね。
重要！ まずは「オリジン」を理解しよう
ローカルファイルで確認した時には「オリジンがないぞ」ってエラーが出るのは不思議ではありません。
(ローカルファイル環境ではlocalStorageが使用できないように)
それがサーバーにアップされたことにより解消されたというわけですね。
ローカルにサーバーを立てて動作確認するように言われるのはこのようにローカルファイルでは動作しない機能などがあり完全なテストができないから(本番に近い環境でテストできないから)という理由もあります。
重要！ まずは「オリジン」を理解しよう
ローカルファイルで確認した時には「オリジンがないぞ」ってエラーが出るのは不思議ではありません。
(ローカルファイル環境ではlocalStorageが使用できないように)
それがサーバーにアップされたことにより解消されたというわけですね。
ローカルにサーバーを立てて動作確認するように言われるのはこのようにローカルファイルでは動作しない機能などがあり完全なテストができないから(本番に近い環境でテストできないから)という理由もあります。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2015/04/01 18:03
＞ローカルにサーバーを立てて動作確認するように言われるのはこのようにローカルファイルでは動作しない機能などがあり完全なテストができないから(本番に近い環境でテストできないから)という理由もあります。
なるほど。勉強になりました。
ちなみにlocalStorageってなんでしょうか？
2015/04/01 20:52
これまでcookieを使用していたものはこれからはsessionStorageなどを用いて作られていくようになるんじゃないですかね
参考URL: http://www.htmq.com/webstorage/
2015/04/04 13:20
ブラウザにデータを保持する仕組みはクッキーしかないと思っていました。