フレーム分割すると動かない

解決済

質問者：take_july
質問日時：2008/08/18 19:09
回答数：4件

以下のように選択された罫表内のセルの線種を変更するボタンを作りました。
１つの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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： taloo
回答日時：2008/08/19 23:53

> グローバル変数が引き継がれないみたいなのですが、解決方法ありますでしょうか。

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がウインドウ名の代わりになります。

- 0
- 件

通報する

この回答へのお礼

明確な回答有難うございました。
解決できました。助かりました。

通報する

お礼日時：2008/08/20 10:19

No.4

回答者： HIRSYU
回答日時：2008/08/20 00:39

「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エラーが発生するなどもある。いずれ考慮してみるといい。

- 0
- 件

通報する

この回答へのお礼

汚いソース見てもらって有難うございました。
必要な所のみ切り出したつもりでしたが、ボロボロでした。。

お陰様で解決できました。
有難うございました。

通報する

お礼日時：2008/08/20 10:21

No.3

回答者： taloo
回答日時：2008/08/19 23:57

連続ですみません。

補足です。

> と書いて、sample.jsに書かれたグローバル変数は、A.htmlとB.htmlで共有できるか？
> ということでしょうか。
>
> それは「できません」
ページを移動したり、２つのウインドウを開いてそれぞれアドレス欄にＵＲＬを入力してページを開いたときは変数を共有することは出来ません。

フレームやwindow.open()を使用したときは、window同志で関連を持っていますので、その変数の利用や関数の実行も可能です。

- 0
- 件

通報する

No.1

回答者： HIRSYU
回答日時：2008/08/19 00:32

「sample_csv2.js」内のソースも提示してください。

この回答への補足

すいません、書ききれなかったので
宜しくお願いします。

//******************************************
//グローバル変数
//******************************************

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();

}
}
}
}
}
}

補足日時：2008/08/19 09:47

通報する

- 0
- 件

通報する

この回答へのお礼

汚いソースをソースをべたべたとすいません。。
以下の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>