bodyの要素をクリックで変えたいです

ボタンクリックで開いた（すでに開いている場合はフォーカスする）ウィンドウの背景を変えたく下記のように書いたのですが、別ウィンドウではなくこのページの背景が変わってしまいます。
どこの記述をどのように直せばいいのか教えていただきたいです。

javascript
1<script type="text/javascript">
2<!--
3function color(){
4var win;
5if(!win||win.closed){
6var w=window.open("●.html","windowname");
7w.document.body.style.background="#0000ff";
8}else{win.focus();
9w.document.body.style.background="#0000ff";
10}
11}//--></script>
12
13<body>
14<input type="button" value="実行" onclick="color();"/>
15<body>

行動規範の内容に同意します

回答3件

ベストアンサー

open直後ではまだ開いていないため1000ミリ秒待ってみましたが、それまでに開けなければやはり失敗します。

親

JavaScript
1var win;
2function color() {
3  if (!win || win.closed) {
4    win = window.open("child.html", "windowname");
5    setTimeout(function() { win.postMessage('#0000ff', '*'); }, 1000);
6  } else {
7    win.focus();
8    win.postMessage('#0000ff', '*');
9  }
10}

子

JavaScript
1window.addEventListener('message', function(event) {
2  document.body.style.background = event.data;
3});

https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage

投稿2018/06/28 06:58

x_x

総合スコア13749

x_x

2018/06/28 08:50

これは開くのが遅いと失敗したり、速いと遅れが生じますが、子のロードで親にpostMessage()で通知する仕組みにすれば遅延なく実行できます。

nuk_ww

2018/07/09 02:24

ありがとうございます。

行動規範の内容に同意します

変数winが宣言されただけになってませんか？
あと今の宣言場所だと2回目以降のボタンクリックで参照できません。グローバルにしましょう。

既に回答にありますがChromeなどのブラウザでは親から子の操作を許容されていません。
IE11では確認できましたが、他のブラウザでは動作の保証はありません。
各種ブラウザでの対応を目指す場合、子ウィンドウのloadイベントなどで代用した方がいいかもしれません。

js
1var win;
2function color(){
3    if(!win||win.closed){
4        win=window.open("win2.html","windowname");
5        win.document.body.style.background="#0000ff";
6    }else{
7        win.focus();
8        win.document.body.style.background="#ccc";
9    }
10}

※既に開いている場合のために背景色変えてます。

追記：

<body>が閉じられていません。</body>ですね。
インデントはきちんとつけてください。カッコの閉じ忘れなどに気づきにくいです。

投稿2018/06/28 00:45

m.ts10806

総合スコア80850

javascriptはセキュリティ上、他のウィンドウ他のhtml要素を弄れません。
見たところ、全てローカルのhtmlファイルを扱っているように見えます。(勝手な思い込みですが)
別のhtmlファイルを開くのであれば、開いたhtml上のスクリプトで処理を行うべきです。
また、ウィンドウ(タブ)を分ける必要性などを考えてみる必要はあると思います。
外部のURLを開く場合、クロスサイトスクリプティングの範疇になるので難しいと思います。

投稿2018/06/27 14:05