Q&A
###前提・実現したいこと
JavaScriptを用いてサブウィンドウからサブウィンドウに指示を出すことは可能でしょうか？
以下のような流れで実装したいと考えております。
①大元のウィンドウにボタンを一つ実装する
②そのボタンを押すとサブウィンドウAとサブウィンドウBの２つが別タブに開く
③サブウィンドウAに実装されているボタン”ChangeB”を押すと、今開いているサブウィンドウBの背景色が変化する
現状、以下に記述したコードで、②の動作までは完了しておりますが、最後の背景を変更するアクションだけが上手くいかず、Aのコンソールはエラー文となっております。
今回初投稿でして、もし分かりにくい文章でしたら申し訳ございません。
何卒お力添えのほどよろしくお願いいたします。
使用ブラウザ：GoogleChrome
使用OS：macOS HighSierra ver.10.13.1
###発生しているエラーメッセージ
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
###該当のソースコード
HTML/JavaScript
1 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="UTF-8" /> 6<title>Parent</title> 7<script type="text/javascript"> 8<!-- 9 function funcOpen() { 10 var A = window.open("ChildA.html", "A"); 11 var B = window.open("ChildB.html", "B"); 12 } 13//--> 14</script> 15</head> 16<body> 17 <form> 18 <input type="button" value="P" onClick="funcOpen();" /> 19 </form> 20</body> 21</html> 22 23 24 25<!DOCTYPE html> 26<html> 27<head> 28<meta charset="UTF-8" /> 29<title>ChildA</title> 30<script type="text/javascript"> 31<!-- 32 function funcChange() { 33 var B = window.open("", "pageB"); 34 B.document.bgColor = "Blue"; 35 } 36//--> 37</script> 38</head> 39<body> 40 <form> 41 <input type="button" value="ChangeB" onClick="funcChange();" /> 42 </form> 43</body> 44</html> 45 46 47 48<!DOCTYPE html> 49<html> 50<head> 51<meta charset="UTF-8" /> 52<title>ChildB</title> 53<script type="text/javascript"> 54<!-- 55 window.name = "pageB"; 56//--> 57</script> 58</head> 59<body> 60</body> 61</html>
以上です。よろしくお願いいたします。
回答1件
0
ベストアンサー
同一オリジンですかね？ ローカルでテストしているならサーバーを立ててテストしてみてください。
同一オリジンポリシー - Web セキュリティ | MDN
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy
window.postMessage
https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage
投稿2017/12/20 02:17
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/11 15:43