- ベストアンサー
フレーム分割すると動かない
以下のように選択された罫表内のセルの線種を変更するボタンを作りました。 １つのhtmlの時は上手くいっていたのですが、以下のようにボタンと罫表のフレームを分割した所、動かなくなってしまいました。 グローバル変数が引き継がれないみたいなのですが、解決方法ありますでしょうか。 宜しくお願いします。 //メインのhtml <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="sample_csv2.js"></script> </head> <frameset rows="50,*" frameborder="0" border="0"> <frame src="fre1.html" name="f1"> <frame src="fre2.html" name="f2"> </frameset> </html> //フレーム１のhtml <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="sample_csv2.js"></script> </head> <body> <div style="font-size:6.5pt"> 線種変更： <input type="button" value="上２" onclick="chgLine('top','double')" style="font-size:6.5pt"/> </div> </html> //フレーム２のhtml <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="sample_csv2.js"></script> </head> <body> <table tno=1 style='border:none;border-collapse:collapse'> <tr> <td style='width=100.0pt;border:solid windowtext 1.0pt; padding:0mm 4.95pt 0mm 4.95pt'> <p style='font-size:10.5pt;mso-bidi-font-size:10.5pt; font-family:"ＭＳ 明朝"'>あいうえお</p> </td> <td style='width=100.0pt;border:solid windowtext 1.0pt;padding:0mm 4.95pt 0mm 4.95pt'> <p style='font-size:10.5pt;mso-bidi-font-size:10.5pt; font-family:"ＭＳ 明朝"'>かきくけこ</p> </td> </tr> <tr > <td style='width=100.0pt;border:solid windowtext 1.0pt;padding:0mm 4.95pt 0mm 4.95pt'> <p style='font-size:10.5pt;mso-bidi-font-size:10.5pt; font-family:"ＭＳ 明朝"'>たちつてと</p> </td> <td style='width=100.0pt;border:solid windowtext 1.0pt;padding:0mm 4.95pt 0mm 4.95pt'> <p style='font-size:10.5pt;mso-bidi-font-size:10.5pt; font-family:"ＭＳ 明朝"'>なにぬねの</p> </td> </tr> </table> </body> </html>
- take_july
- お礼率54% (88/162)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> グローバル変数が引き継がれないみたいなのですが、解決方法ありますでしょうか。 A.html <script src="sample.js"></script> B.html <script src="sample.js"></script> と書いて、sample.jsに書かれたグローバル変数は、A.htmlとB.htmlで共有できるか？ ということでしょうか。 それは「できません」 framesetのHTMLファイルのなか（メインのhtml）で<script>で読み込んでいますので、それに対しては top.変数名 で共有できます。 それ以外のウインドウの変数は、"top.ウインドウ名.変数名"でアクセスしてください。 top.frames['frameName'].variables と書くとわかりやすいかも知れません。 今回のは関係ありませんが、 window.open()で開いたウインドウの場合はwindow.open()の戻り値やopenerがウインドウ名の代わりになります。
その他の回答 (3)
- HIRSYU
- ベストアンサー率51% (45/87)
「sample_csv2.js」内を修正するのは面倒そうですね。 talooさんが言うように、無難にフレーム１からフレーム２のJavaScriptを参照して実行する感じが一番かも。 //フレーム１のhtml <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div style="font-size:6.5pt"> 線種変更： <input type="button" value="上２" onclick="window.top.frames['f2'].chgLine('top','double')" style="font-size:6.5pt"/> </div> </html> かな。 フレーム１ではJavaScriptファイルの読み込みは不要。 そして、フレーム２の「chgLine」を実行するように変更。 詳しい説明は、talooさんの説明通り。 #フレーム２が読み込み済みじゃないと、フレーム１から「chgLine」の実行ができずJavaScriptエラーが発生するなどもある。いずれ考慮してみるといい。
お礼
汚いソース見てもらって有難うございました。 必要な所のみ切り出したつもりでしたが、ボロボロでした。。 お陰様で解決できました。 有難うございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
連続ですみません。補足です。 > と書いて、sample.jsに書かれたグローバル変数は、A.htmlとB.htmlで共有できるか？ > ということでしょうか。 > > それは「できません」 ページを移動したり、２つのウインドウを開いてそれぞれアドレス欄にＵＲＬを入力してページを開いたときは変数を共有することは出来ません。 フレームやwindow.open()を使用したときは、window同志で関連を持っていますので、その変数の利用や関数の実行も可能です。
- HIRSYU
- ベストアンサー率51% (45/87)
「sample_csv2.js」内のソースも提示してください。
お礼
汚いソースをソースをべたべたとすいません。。 以下のhtmlでは上手くいっているのですが。 何か分かりますでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="sample_csv2.js"></script> </head> <body> <div style="font-size:6.5pt"> 線種変更： <input type="button" value="上２" onclick="chgLine('top','double')" style="font-size:6.5pt"/> </div> <table tno=1 style='border:none;border-collapse:collapse'> <tr> <td style='width=100.0pt;border:solid windowtext 1.0pt; padding:0mm 4.95pt 0mm 4.95pt'> <p style='font-size:10.5pt;mso-bidi-font-size:10.5pt; font-family:"ＭＳ 明朝"'>あいうえお</p> </td> <td style='width=100.0pt;border:solid windowtext 1.0pt;padding:0mm 4.95pt 0mm 4.95pt'> <p style='font-size:10.5pt;mso-bidi-font-size:10.5pt; font-family:"ＭＳ 明朝"'>かきくけこ</p> </td> </tr> <tr > <td style='width=100.0pt;border:solid windowtext 1.0pt;padding:0mm 4.95pt 0mm 4.95pt'> <p style='font-size:10.5pt;mso-bidi-font-size:10.5pt; font-family:"ＭＳ 明朝"'>たちつてと</p> </td> <td style='width=100.0pt;border:solid windowtext 1.0pt;padding:0mm 4.95pt 0mm 4.95pt'> <p style='font-size:10.5pt;mso-bidi-font-size:10.5pt; font-family:"ＭＳ 明朝"'>なにぬねの</p> </td> </tr> </table> </body> </html>
補足
すいません、書ききれなかったので 宜しくお願いします。 //****************************************** //グローバル変数 //****************************************** var cellCnt = 0; var tnoArray = new Array(100); var rowArray = new Array(100); var colArray = new Array(100); window.onload = init; //****************************************** //初期処理 //****************************************** function init(){ var mouseFlg = 0; var col; var row; var td = document.getElementsByTagName("td"); var length = td.length; alert('td数:'+length); for(var i = 0; i < length; i++) { td[i].onclick = function (){ // this.style.backgroundColor = "#AAA"; if(this.getAttribute("hyou") != "k"){ this.style.backgroundColor = "yellow"; //列番号取得 var befTd = this.previousSibling; var col = 0; while(befTd){ if(befTd.nodeName=="TD")col++; befTd=befTd.previousSibling; } //行番号取得 var befTr = this.parentNode.previousSibling; var row=0; while(befTr){ if(befTr.nodeName=="TR") row++; befTr=befTr.previousSibling; } //テーブルno取得 var tNo = this.parentNode.parentNode.parentNode.getAttribute("tno"); alert("テーブルno:" + tNo +"列番号:"+col.toString()+" 行番号:"+row.toString()); tnoArray[cellCnt] = tNo; rowArray[cellCnt] = row; colArray[cellCnt] = col; cellCnt = cellCnt + 1; } } } } //****************************************** //線種変更 //****************************************** function chgLine( pos , line){ if( cellCnt != 1){ alert("線種の変更はセル１つを選択してください。"); return; } var tno = tnoArray[0]; var col = colArray[0]; var row = rowArray[0]; var tableNode = document.getElementsByTagName("table"); //tableを取得 for(var i = 0; i < tableNode.length; i++) { alert(tableNode[i].getAttribute("tno") + tno); if(tableNode[i].getAttribute("tno") != tno){ continue; } var trNode = tableNode[i].getElementsByTagName("tr"); var trLength = trNode.length; //trを取得 for(var i = 0; i < trLength; i++) { if( i == row){ var tdNode = trNode[i].getElementsByTagName("td"); var tdLength = tdNode.length; //tdを取得 for(var j = 0; j < tdLength; j++) { var strStyle; if(line == "solid"){ strStyle = "double windowtext 1.0pt;"; }else if(line == "double"){ strStyle = "double windowtext 3.0pt;"; }else if(line == "bold"){ strStyle = "solid windowtext 2.5pt;"; }else if(line == "dotted"){ strStyle = "dotted windowtext 1.0pt;"; }else if(line == "none"){ strStyle = "none windowtext 1.0pt;"; } if( j == col){ if(pos == "top"){ tdNode[j].style.borderTop = strStyle; }else if(pos == "bottom"){ tdNode[j].style.borderBottom = strStyle; }else if(pos == "left"){ tdNode[j].style.borderLeft = strStyle; }else if(pos == "right"){ tdNode[j].style.borderRight = strStyle; } reset(); } } } } } }
お礼
明確な回答有難うございました。 解決できました。助かりました。