子ウィンドウ先のstyle.displayを使って答えを開く方法
- 子ウィンドウ先でstyle.displayを使って答えを開く方法について説明します。親ウィンドウから子ウィンドウを開く際に、子ウィンドウ先のdocumentを認識しない場合があるため、対処方法を知りたいと思っています。
- 質問文章では、親ウィンドウと子ウィンドウの構成やスクリプトの内容について説明されています。親ウィンドウでOpenAns関数を定義し、子ウィンドウを開く際にstyle.displayを使って答えを開くようにしています。しかし、子ウィンドウ先のdocumentが正しく認識されない場合があり、答えが開かないこともあるようです。
- この問題の対処方法について説明します。確実に子ウィンドウ先のdocumentを認識するために、OpenAns関数内でwindow.openを実行する前に少しの時間待機することで解決できる可能性があります。具体的な対処方法はコード内のコメントに記載されています。
- ベストアンサー
子ウィンドウ先でstyle.display
親ウィンドウから子ウィンドウを開く際、子ウィンドウ先でstyle.displayを使って答えを開くようにしたいと思っています。 下記のような構成で作ったのですが、子ウィンドウ先のdocumentを認識してくれない時もあるようで、答えが開く時もあれば、開かない時もあり対処を知りたいと思っています。 *** 親ウィンドウ *** <script language="JavaScript"> <!-- function OpenAns () { mywin = window.open("aaa.html", "x", ""); mywin.document.getElementById("id1").style.display="inline"; } // --> </script> <a href="javascript:void(0)" onclick="OpenAns();">答え</a> *** 子ウィンドウ *** <body> ... <span id="id1">答えです。</span> ... </body>
- goofy194
- お礼率92% (52/56)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>Netscapeだけの事象に関し、想定される問題 全然読めないのではなく やっぱり、読めたり読めなかったりするんですよね？ その場合は、やはり、読込が完了しているかどうかいうことではないかと思います。 部分的ではなくて、全部が読み込まれないといけないのかもしれないし・ * 子ウインドウが開いたままの時は問題なく実行できるのですよね。 始めて子ウィンドウを開くときには answer.html?no=10 とかクエリーを渡して、 そのページ自体にonload時に、指定されたnoをinlineにするとかするようにしたら確実かもしれません。
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
ちょっと分からない部分があるのですが、 「答えです」の部分をstyle.display="inline"する意味はあるのでしょうか？ 子ウインドウを開いてその時始めて答えが表示されるのであれば、特別何もする必要がないような気がします。 * 元々そのページの答えがdisplay=noneになっていて、 タイミングによってdisplay=inlineにする時 それが、できたりできなかったりするのは、 多分、ページの読み込みがまだ完了していない時に実行しようとしているからだと思います。 mywin.document.getElementById("id1") がまだ存在していなければ、少し待つと言うようにする必要があるかと思います。
お礼
回答ありがとうございます。IEに関しては期待通りの動きとなりました。 質問内容はかなり簡潔に記載しておりますが、実際は親ウィンドウに複数の質問があり、子ウィンドウ先参照ページでも対応する複数回答があります。 そのため、親ウィンドウ側のある質問Aをクリックすると、子ウィンドウ先ではそれに対応する回答Aのみを表示させたいということでした。 子ウィンドウ先は全て'none"でロードされております。 ご回答いただいた通り、インターバルを付けてみたら、IEに対しては期待通りの動きをしてくれました。 しかし、Netscapeの方ではインターバルを長くしても、 mywin.document.getElementById("id1") has no properties となってしまいます。 もしこのNetscapeだけの事象に関し、想定される問題があればご教示いただけますでしょうか？
関連するQ&A
- 表示と非表示
下のような物があったときに、１を押したときに１が現れるのですが、続けて２を押したときに１と２が表示されてしまいます。 この時に、２を押したら、１を非表示にして２だけを表示したいのですが、可能でしょうか？ よろしくお願い致します。 <HTML><HEAD><TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function apper(sLayers) { if (document.all) { if (document.all(sLayers).style.display=='inline') { document.all(sLayers).style.display='none'; } else { document.all(sLayers).style.display='inline'; } } return (false); } // --> </SCRIPT> <style type="text/css"> span.hidden { position: relative; display: none } span.visiable { position: relative; display: inline } // --> </style></HEAD> <BODY> <a href="" onClick="return apper('1')">質問１</a><br> <a href="" onClick="return apper('2')">質問２</a><br> <a href="" onClick="return apper('3')">質問３</a><br> <span class="hidden" id="1">1<br></span> <span class="hidden" id="2">2<br></span> <span class="hidden" id="3">3<br></span> </BODY></HTML>
- ベストアンサー
- JavaScript
- cssでdisplay:noneを指定した時のプルダウンメニュー
こんにちは、JavaScriptでプルダウンメニューを作ろうとして cssで予めdisplay:none;を指定したところ、 メニューがクリックしても開かなくなってしまいました。 html、css、JavaScriptの記述は以下の通りです。 html --------------------------------------- <span onclick="PullDown('term1')">クリック</span> <div id="term1"> <ul> <li>***********</li> <li>***********</li> </ul> </div> ----------------------------- css ------------------------------ div#term1 { display: none; } ------------------------------- JavaScript ------------------------------- function PullDown(id){ if(document.getElementById(id).style.display == 'none') document.getElementById(id).style.display=''; else document.getElementById(id).style.display='none'; } --------------------------------- cssの記述部分を無くすとちゃんと開いたり閉じたりと動作します。 また、 function Init(){ document.getElementById("term1").style.display="none"; } とJavaScriptで書いて、 bodyタグの所で <body onload="Init()">として呼び出してロード時に隠すようにするとちゃんと開閉してくれます。 cssでdisplay:none;と書くと動かなくなる理由と、 対策が分かる方居ましたら教えてください。
- ベストアンサー
- JavaScript
- style.displayだと効率悪いから…
style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。
- ベストアンサー
- JavaScript
- 表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか？
複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。 最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか？ ●例えば、test1を押した際、test2と3は非表示としたいです。 <script language="JavaScript" type="text/JavaScript"> <!-- function ChDsp2(strShow,strHidden){ var obj=''; obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow); obj.style.display = "block"; obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden); obj.style.display = "none"; } //--> </script> <a href="javascript:ChDsp2('text1','text2');">1を表示</a> <a href="javascript:ChDsp2('text2','text1');">2を表示</a> <a href="javascript:ChDsp2('text3','text1');">3を表示</a> <span id="text1" style="display:block;">111111</span> <span id="text2" style="display:none;">222222</span> <span id="text3" style="display:none;">333333</span> どなたか教えてください。お願いします。
- ベストアンサー
- JavaScript
- style.displayだと効率悪いから...
style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>
- 締切済み
- JavaScript
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- 変数をテキストボックスに入れるには?
javascriptでゲームを作っています。 <dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv> でユーザー名が拾えます。 <script type="text/javascript"> document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span>さん。ようこそ</dlv>"); </script> これで、「高橋さん。ようこそ」と表示されます。 次に、この「高橋」をフォームに入れることを考えました。 そこで下記のように作ったのですが、フォームの中は「undefined」になってしまいます。 <script type="text/javascript"> var abk; abk = document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); document.getElementById('cla2').value = abk; </script> <input typy="text" id="cla2" value=“"> 次に下記のように作ったのですが、フォームの中は空です。 <script type="text/javascript"> var abk; abk = document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); $("#text44").val(abk); </script> <input typy="text" id="text44" value=“"> どうすれば、 document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); で表示される文字をフォームの中に記載することが可能になるでしようか?
- ベストアンサー
- JavaScript
- ブラウザのスタイルシート設定の検出
多くのブラウザに、「スタイルシートを使用しない」「ユーザースタイルシートを適用」などの設定がありますが、 スタイルシートの設定を、何らかの方法で検出したいので、方法を教えてください。 javascriptが使用できるか判定するように、スタイルについても判定したいのですが、 例えば、あるidに、display:inline; が適用されているか、display:blockが適用されているかを検出する方法であれば、javaScriptでもDOMでもアクションスクリプトでも、方法は問いませんので、よろしくお願いします。
- ベストアンサー
- HTML
- style.visibility="hidden";
下記は画面にJavaScriptで碁盤の目に区切り 左上の一区切りの下地を表示するコードです <html> <head> <title>タイル</title> <script language="JavaScript"> <!-- var block = [0]; function setTile() { num = 100; w = Math.floor(document.body.clientWidth / num); h = Math.floor(document.body.clientHeight/ num); wTag = ""; n = 1; for (j=0; j<=h; j++) { for (i=0; i<=w; i++) { wTag += "<span id='abc" + n +"' style='position:absolute;top:" + j*num + "px;left:" + i*num + "px;width:" + (num-1) + "px;height:" + (num-1) + "px;background-color:blue;'>" + "</span>"; block[n] ='abc' + n; n++; } } document.all["tile"].innerHTML = wTag; document.body.style.visibility = "visible"; abc1.style.visibility="hidden"; } // --> </script> </head> <body onLoad="setTile()" style="visibility:hidden"> <div id="tile" style="position:absolute;top:0px;left:0px;"></div> </body> </html> 下地を表示する abc1.style.visibility="hidden"; を下記に直すと動かなくなります block[1].style.visibility="hidden"; よろしくお願いします。
- ベストアンサー
- JavaScript
- 親ページから子ページ内の操作をする iframe
インラインフレームを用いたサンプルを作っています。 親から子へ指示を送ったら、子がそれに応じるというものです。 ローカル環境でエラーを出さずに実現するには postMessageで、どんなコードになりますか？ 【親ページ】parent.html <body style="background:bisque"> <div>parent.html 親ページです.</div> <pre> 【テーマ】親ページから子ページ内の操作をする ＜条件＞ ・ローカル環境 ・親子とも同じ場所 ・親の指示で子が応じる </pre> <iframe id="iframe2" width="500" height="160" src="./child.html"> </iframe> <div>親からの指示内容</div> <div><button onclick="func1()">書き換え１</button> 「囲まれています」を「囲まれました」に書き換える</div> <div><button onclick="func2()">書き換え２</button> 「-----」を「親から伝言あり」に書き換える</div> <script> //子に指示する関数 function func1(){ } function func2(){ } </script> </body> 【子ページ】child.html <body style="background:#eee"> <div>child.html 子ページです.</div> <p> <span id="test">ここは「id属性がtest」のspan要素に囲まれています。</span> <div id="result">output:<span>-----</span></div> </p> <script> //子が応じる関数 </script> </body>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。IEはOK,Firefoxの場合、子ウィンドウが開いたままだと正しく表示、Netscapeの場合は、新規Open/ウィンドウが開いたままでもNGとなりました。 ブラウザーに依存するようなので、このあたりは又調べたいと思います。 ヒントを頂いたおかげで、助かりました。