2つのスクリプトの併用


■Q&A

■Question

2つのスプリクトの併用は・・。 2003.4.2.Wed No.1615

こんにちは。
たびたびの質問で申し訳御座いませんが、何卒お知恵を拝借致したくお願い致します。ぴろあきさんにアドヴァイスを頂き、メニューのスプリクトは出来たのですが、このメニューから新しいアイフレームを出すスプリクトでエラー<この操作に対して無効なターゲット要素です>が出てしまいます。どのように記述すれば良いでしょうか。また、アイフレームを上部ではなく、画面の一番下に開く記述も宜しければお教え下さいませ。

■Answer

Re: 2つのスプリクトの併用は・・。 ぴろあき 2003.4.2.Wed No.1619

こういうDHTMLって、本来はHTML・CSS・JavaScript、そしてブラウザごとの仕様差まですべて理解しないとまともに動かせない、とても難しいものです。

というわけで「DHTMLキラー」こと、Netscape4.78 で見てみると。
Netscape478.png
そして JavaScript をOFFにしたIE6では。
IE6.png

お節介ながら、<body> 内に <style> があったり、</head><body>が絡んでたり、その <body> が3つあったり、<font> 内に <div> があったりするのを見ると、JavaScript より先にやらなければならないことがあるように思います。
答えるのは簡単なんですが、ちょっとうざったい思考回路してるもので、どうかお許しください。

まずはこちらから…。
http://www.ne.jp/asahi/minazuki/bakera/html/reference/reference

■Res

Re: 2つのスプリクトの併用は・・。 2003.4.2.Wed No.1620

ありがとうございます。
ゆっくり、考えてみますね。

■Res

Re: 2つのスプリクトの併用は・・。 ぴろあき 2003.4.2.Wed No.1622

まぁあんま深く受け取らないでください。他のことへ夢中になるあまり、一番大事なとこがおろそかになるのは人として正常です。「ガチガチの DHTML サイトでありながら Netscape4 でも Lynx でも JavaScript がOFFでも閲覧に支障ないぜ!」っつぅ自信作を「マイナス64点」などと評価されて、ハートブレイクした過去を持つ奴もいます。(まぁ点数が重要なわけではないのですが)
そんな奴でさえ、1年後には XHTML で100点出すように化けるわけですから、改善に努める限りは今の状況なんて問題ではないです。

願わくば、現状の打破を望むすべての人が、10の失敗をしつつ1の進歩を得られますように、と、そんな感じで。

■Res

な、なんとか。 2003.4.3.Thu No.1627

>ぴろあきさん

84点まで取ることが出来ました。眠)でも、肝心の JavaScript の部分が解らないまま・・・。でも、基本は大切ですね。本当に勉強になりました。

■Answer

おつかれさまでした ぴろあき 2003.4.5.Sat No.1633

まさかこういう返され方をされるとは予想してませんでした。感服です。
その苦労への敬意と、せめてものお詫びとして、質問への回答を。

http://faq.creasus.net/03/0405/


■"この操作に対して無効なターゲット要素です"

52行目の insertAdjacentHTML() メソッドでエラーが起きています。「操作」は insertAdjacentHTML() 自身を、「ターゲット要素」は <iframe> を追加しようとしている <td id="tbAll"> を指しています。
つまり、なにかが間違っているので無効と判断され、エラーになっているわけですね。

このメソッドは第1引数に「追加する場所」、第2引数に「追加するHTML」を指定しますが、間違ったHTMLを入れようとする(入れると正常に表示できない)と、エラーを起こします。

function makeIF(wh){
  if(!IE4 || ifMade)return;
  place=(wh)?"BeforeBegin":"AfterEnd";
  str = ("<P ID=pp><IFRAME SRC='http://www9.ocn.ne.jp/~matata-b/index.html' WIDTH=100% HEIGHT=400><\/IFRAME><\/P>")   tbAll.insertAdjacentHTML(place,str);
  ifMade = true;
}

上記の makeIF() 関数は、呼び出し元が onclick="makeIF(true);return false" とされているので、引数 wh は常に true、つまり insertAdjacentHTML() メソッドの第1引数(place)は、必ず "BeforeBegin" となります。
ここで、この第1引数に指定できる4種類を列挙してみます。厳密には違いますが、「エレメント(=要素)」とは、とりあえずここでは <td id="tbAll"> のことだと思ってください。

この場合は "BeforeBegin" ですから、「エレメント <td> の直前に <iframe> を挿入」ということになります。挿入する部分のソースを要約すると、

<tr><td id="tbAll">
  <a href="javascript:sp02.html#" onclick="makeIF(true);return false">IFRAMEを表示</a>
</td></tr>

となってますが、これを

<tr><p><iframe src="..." ...></iframe></p><td id="tbAll">
  <a href="javascript:sp02.html#" onclick="makeIF(true);return false">IFRAMEを表示</a>
</td></tr>

にしようとしていることになります。これはHTMLとしては超NGですから、エラーになってしまいます。

よって、正解は「第1引数を "AfterBegin" または "BeforeEnd" にして、<td> の直後か </td> の直前に <iframe> を入れる」です。
ただ、これだとちっちゃいエレベーターメニューの中に <iframe> を入れることになるんですが、それは期待通りの結果なので?

それと、この「<iframe> 表示/非表示スクリプト」は、ちょちょっと改造するだけで Netscape6 以降・Opera7 にも対応できます。具体的には、document.all の代わりに document.getElementById を、insertAdjacentHTML の代わりに innerHTMLcreateElement を使います。
これについては、■以上のもろもろに勝手な修正を施したものを参照してください。


■DHTMLを使うにあたって

Netscape7 と Opera7 のインストールをおすすめします。高度な DHTML を使うなら、「他のブラウザではどう見えるか」を自分で確認できる環境を用意した方が良いです。可能なら Netscape4 も用意したいところです。
だからといって Windows と Mac と UNIX を用意しろ、と言うわけにもいかないので、せめて「主流3大ブラウザ」だけでも。幸い、これらは全部無償で使えます。
難しい設定などはありませんし、インストールも普通のソフトと同じですから、入れてすぐに使えます。


■全体に関して

<iframe> に対応してないブラウザ(Netscape4等)では、閲覧どころの話ではなくなります。

<iframe src="index.html">
  <a href="index.html">代わりのリンク</a>
</iframe>

とすれば、非対応ブラウザでは代わりのリンクが表示されます。

こういう代替ナビゲーションをしっかり作ることができれば、<iframe> も「嫌われるもの」から「許容されるもの」になります。(でも仕様書から削除されてしまった以上、「歓迎されるもの」にはならないのですけど)


■エレベーターメニューの▲UP▲


■プレページ(wait a moment)に関する部分

Nloding() 関数を少し修正すれば、非対応ブラウザでのエラーを回避できる他、Netscape4 にも対応します。ただし、Netscape や Opera では、<iframe> が常に一番上にくるため、レイヤーで覆って隠すことはできません。

また、wait 画像そのものも JavaScript で書き出すことにより、機能がOFFの場合の支障を回避します。さらに、これはロード完了後に非表示にするので、対応するブラウザでのみ書き出します。
こうしないと、非対応ブラウザでは画像が出たままどうしようもなくなります。

あと、Netscape4 では style="" をスクリプトで書き出すと落ちやすいので、スタイル指定は <style> の方へ分離した方がいいでしょう。


■HTML-lintではチェックされない項目

25〜35行目
<style> のインデント(字下げ)に、全角スペースが混じっています。半角スペースやタブに修正しましょう。
26行目
スタイルシートには font-color 属性はありません。文字色は color、背景色は background-color です。あと、行末に全角スペースが混じっています。
51行目
makeIF() 関数内の <IFRAME> にある WIDTH=100% は誤りです。属性の値に英数字(と、ごく一部の記号)以外が入る時は、必ず引用符でくくらないといけません。この部分は JavaScript 内の記述なので、WIDTH=\"100%\" または WIDTH='100%' のようにします。
後々面倒くさいことになりますから、値は全部くくる癖をつけておくことを強く推奨します。
206行目
スタイルシートには align 属性はありません。テキストや画像を中央に寄せるなら text-align:center; を、<div> 自体を中央に寄せるなら width:80%; margin-left:10%; margin-right:10%; のようにしましょう。
あるいは、非推奨属性ではありますが <div align="center"> とします。(仕様上では width:80%; margin:0px auto; にすると中央寄せになるはずなのですが、IEでは無視されてしまいます)
215行目
onclick="javascript:fallDown('menu1',15,50)"javascript: は不要です。
これは <head><meta http-equiv="Content-Script-Type" content="text/javascript"> とすることで、デフォルトの言語がすでに JavaScript になっているから。(つまり、<meta> でデフォルトの言語を指定している時に他の言語を使いたい時は、onclick="vbscript:...." などが必要になります)
サンプル:onclick="msgBox('VBScript')"
サンプル:onclick="vbscript:msgBox('VBScript')"
276〜277行目
href="javascript:sp02.htm#" は誤りです。「右クリック→新しいウィンドウ」をやられた時に「sp02オブジェクトのhtmプロパティ」を探そうとしてエラーを起こします。この場合は href="sp02.htm"href="#" が無難です。

■以上のもろもろに勝手な修正を施したもの

mihon.html

ソースの方に色々書いておいたんで、気が向いたら。


■ちゃんとしたHTMLを勉強するためには

一度間違ったHTMLを憶えてしまうと、その是正には大きな苦労が必要です。最初のうちは禁煙にも等しい拒絶感があることでしょう。(誰かさんも1年かかったことですし)
でも、ちゃんとしたHTMLは「どんな環境にも対応する」ために必要です。「当サイトはIEでご覧ください」などといったことを書かないために必要です。
なにより、ちゃんとしたHTMLは作る方も見る方も気分が良いです。

くれぐれもHTML-lintに頼りすぎないように注意してください。記述のミスを見つけるには便利ですが、HTMLの本来の仕事は "見出し" "段落" "表" といった文書の構造を取り決めることであり、「それが適切なマークアップであるか」はプログラムには判断できません。あるいは、時として(旧ブラウザとの互換性のために)わざと不適切なことをすることもあります。(ちなみにこのページは100点ですが、HTML的にはあまり良い出来ではなかったりします)

この辺については以下のサイトがお役立ちです。「HTMLとはなんなのか」を肌で感じることが、習得への近道かなぁ?
Personnel / 初心者のためのホームページ作成講座

以上、少しずつでも頑張っていってください。つぅか俺も頑張らないといけません。(笑)


■終わりに

余計な私事に手間取って遅くなってしまいました。見てくれればいいけど。


■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)