フラグメント参照

理念

最終更新
更新はありません

ジャンプしないリンクを作ってみました。

外部の用語集(HTML文書)の一要素を参照したとき、ページを切り替えずポップアップ表示させます。「リンク = ジャンプ」という既成概念の否定が目的です。「利便性」はただのアイキャッチです。

例文

最終更新
更新はありません

クリックでフラグメントの内容をポップアップ、コンテクストメニューの「開く」等で用語集の当該箇所に移動します。DOMを実装していないブラウザにとっては普通のリンクです。

CSSselectorには、全称セレクタタイプセレクタ子孫セレクタ等があります。

仕組み

最終更新
更新はありません

HTML

  1. まず用語集を、dl, dt, ddで作成します(別ファイル)。
  2. iframe要素(src属性)で用語集にリンクします。
  3. a要素で普通に特定用語にリンクします。
  4. ポップアップ参照を適用したいa要素には、特定のclassを付けておきます。

CSS

ポップアップにはidをつけたdiv要素を使います。position : absolute他を指定したCSSファイルを別途用意し、DOM実装判別してdocument.writeします。

J(ava)Script

IEの場合

framesコレクションからiframe要素にアクセスし、documentオブジェクトでDOMツリーにアクセス、フラグメントの内容を取得します。

Mozilla系の場合

getElementByIdメソッドでiframe要素にアクセス後、contentDocumentでDOMツリーにアクセス、フラグメントを内容を取得します。


この例は用語集なので、nextSibling(dd要素)の内容を取得することになります。

理想

  • この例ではhashを利用してしまっていますが、href属性をそのまま利用する方式の方がベター。十分可能なはずなので、そのうちやります。
  • HTMLにiframeの実体を作る必要はありません(多分)。DOMで生成したほうが良いかと思います。もちろんObject要素の方が(以下略)
  • rel="glossary"を持ったlink要素から用語集のDOMツリーにアクセスできれば最高に理想的です(無理)。

その他

最終更新
更新はありません

動作確認

Internet Explorer6、Netscape6にて確認しています。ただ、Netscape6はたまにポップアップしないときがあります。Mozilla0.9.7はもうなんだかよく分かりません。心当たりの無いエラーに、かなり頭にきています。多分Mozのバグ。 どうもたまたま調子が悪かっただけらしく、Mozillaでも確認しました。何だったのか。

妥協点

  • とあるバグブラウザを考慮した結果、やむを得ずtransitional DTDを用いることとなりました。もちろんIEのことです。尚、iframe要素をcreateElementすれば良いと思われるかも知れませんが、それはValidator向けのインチキというもの。生成後もValidであるべきです。
  • 面倒臭かったのでinnerHTMLを使っています。必要ありません。

ちなみに

なんか投げやりな感じですが、理念を見得ず、機能だけに着目する方には早々にウンザリしてもらいたいという思惑があります。