プログラミングの最近のブログ記事

Firefox3 で JavaScript が動かない件

shinoda
(2009年7月10日 11:10) | | コメント(0) | トラックバック(0)
InternetExplorer7 では動いている JavaScript が Firefox3 では動かない件。

JavaScript が

function setMsg(){
    var msg = new Array();
    msg[0]    = "選択してください";
    msg[1]    = "１番選択されました";
    msg[2]    = "２番選択されました";
    form1.text1.value    = msg[form1.select1.selectedIndex];
}

こんな感じで、本文が、

<form name="form1">
選択：<select name ="select1" onChange="setMsg();">
<option value="0" selected>-- 選択してください --</option>
<option value="3">1番目</option>
<option value="8">2番目</option>
</select><br>
メッセージ ：<input type="text" name="text1" value="">
</form>

こんな感じ。
つまり、プルダウンで値を選択すると、その値によって異なるメッセージをセットしているだけだ。

一応、setMsg 関数の頭に alert 文を突っ込んでやると、ちゃんとダイアログボックスが開くので、onChange="setMsg();" による関数の実行はされているようだ。

Firefox3 のエラーコンソールを見ると、

エラー: form1 is not defined

と出ている。

どうも、name 属性値で要素を指定することが出来ないようで。
ID 指定で要素をオブジェクト化し、それを使用する形に記述（W3C 標準の記述？）しないといかんようですな。
InternetExplorer7 と比べて、Firefox3 はこの辺りのチェックが厳密なようで。

ということで、form に'form1'という ID を指定し、document.getElementById で form1 という element オブジェクトに ID='form1' の要素を突っ込み、それを参照するようにすればＯＫ！

◆JavaScript

function setMsg(){
    var msg = new Array();
    msg[0]    = "選択してください";
    msg[1]    = "１番選択されました";
    msg[2]    = "２番選択されました";
    var form1    = document.getElementById("form1");
    form1.text1.value    = msg[form1.select1.selectedIndex];
}

◆本文

<form id="form1" name="form1">
選択：<select name ="select1" onChange="setMsg();">
<option value="0" selected>-- 選択してください --</option>
<option value="3">1番目</option>
<option value="8">2番目</option>
</select><br>
メッセージ ：<input type="text" name="text1" value="">
</form>

ま、あと、裏技的に、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

を、

<html>

という記述に修正すれば W3C 標準のチェックはかからなくなるので JavaScript は動くが、画面の表示が正常に行われなくなる場合もあるじゃろうね。

インラインフレームの高さを動的に変更する方法

shinoda
(2009年6月13日 18:07) | | コメント(0) | トラックバック(0)

今回、SSI の使えないサーバ上で、CGI や PHP で出力する HTML 内に Perl スクリプトの吐く内容を動的にセットしたい案件があって、SSI が使えないので iframe で CGI の出力結果をはめ込むようにしたんだが、新着情報のように表示件数が変化する部分は、
動的に高さを調整したい。

こう言うときは、JavaScript と組み合わせて制御するしかなく、

「IFRAMEの高さ可変」
http://nacky.s206.xrea.com/notebook/archives/2007/06/10-012813.php

というサイトを参考に組み込んでみたのだが、どうも、本来のコンテンツの高さよりも余分に高さ設定がされてるような・・・

画像にコピーして見てみたら、20px くらい高い。
高さ判定してるところで、無条件に -20 するようにしようかと思って JavaScript 見てみたら、

document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ;

みたいに、わざわざ本来の高さに +20 してあった。

ああ・・・なんだ、そうだったのか。ちゃんとソースを見てませんでした。(^^;

どうも、本来の高さキツキツに高さ設定をすると、Netscape 系のブラウザではスクロールバーが出てしまうので、その対策のようだ。
今回、うちの案件ではデザイン上の理由で scrolling="no" 固定にしているのでスクロールバーのことは考えなくて言い。

ということで、+20 の部分を削って、

document.getElementById(ID).style.height = parent.frames[NAME].document.height +"px" ;

としました。これでバッチリ。

↑件のサイトのオーナー様。素敵な JavaScript をありがとうございました。

JavaScript で radio ボタンの必須チェックをする

shinoda
(2009年4月 9日 14:24) | | コメント(0) | トラックバック(0)

実は、JavaScript はよく知らないので、簡単なことでも引っかかってしまう。

今日も、

<form method="post" action="hogehoge.cgi" name="form1" onSubmit="return check();">
【性別】<br>
<input name="性別" type="radio" value="男性">男性 <br>
<input name="性別" type="radio" value="女性">女性 <br>

こういうラジオボタンの選択状況をチェックする Script を書いた。
ボタンが選択されるまでは value 値もセットされないわけだから、

if (document.form1.性別.value.length == 0) {
    alert('性別を選択してください。');
    return false;
}

なんて感じでええんかな・・・と思ってたら、大間違い。

InternetExplorer7 は実行エラーを出すけど（ま、内容はわかりづらいけどね(^^;）、FireFox3 は何のエラーも出さずに、移行の処理をキャンセルして終わるだけ（hogehoge.cgi が submit される）。

正しくは、

if ((document.form1.性別[0].checked == "") && (document.form1.性別[1].checked == "")) {
    alert('性別を選択してください。');
    return false;
}

こう、書かないと。

JavaScript が世に出てきたときは、まあ、セキュリティの面から見ても、今後もお遊び程度のオブジェクトの制御に使われるくらいだろうと、よもやこんなに JavaScript でがりがり処理を書く時代がくるなんて思いもしなかった。
なもんで当時全然覚える気がなくて、今頃になって色々勉強しているというわけだ。とほほ。

ま、JavaScript というよりも、オブジェクト指向言語全体を苦手としてるんだけどな。あいたたた・・・

« パソコン | メインページ | アーカイブ

検索

このアーカイブについて

このページには、過去に書かれたブログ記事のうちプログラミングカテゴリに属しているものが含まれています。

前のカテゴリはパソコンです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

2009年7月: 月別アーカイブ

カテゴリ

月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら