fc2ブログ
GEEKy Script Writer [perl and more!]
You should permit the JavaScript!!
ページ内の記事を一覧にする (見出し付き)
というわけで、見出し付きの記事リストのソースを載せてみる。
IEで見るとかなり縦長なのでFireFoxで見ることを勧める。

<script type="text/javascript">
<!--
elm4 = document.getElementsByTagName('div');
elm5 = document.getElementById('Article_List');
bodyelm = document.getElementsByTagName('body').item(0);
brz = window.navigator.appName.match(/^Netscape$/i);
s = 0;
elm5.innerHTML = "";
while(s < elm4.length){
if(elm4.item(s).className == 'mainEntryTitle'){
var elmm = document.createElement('a');
var sr = s;
var st_txt = "";
while(elm4.item(++sr).className == 'mainEntryBody'){}
elmm.setAttribute('href',"#"+""+elm4.item(s).firstChild.name);
var stjc = document.createElement('div');
stjc.appendChild(document.createTextNode(getStringByElement(elm4.item(sr)).substr(0,10) + "......"));
stjc.style.display = "none";
var id = "n_"+s;
stjc.setAttribute('id',id);
stjc.style.border = "1px solid #000000";
stjc.style.backgroundColor = "#ffffff";
bodyelm.appendChild(stjc);
if(brz){
elmm.onmouseover = function(r,event){
return function(e){
open_div(r,e.pageX,e.pageY);
}
}(id);
elmm.onmouseout = function(r){
return function(){
hide_div(r);
}
}(id);
}else{
elmm.onmouseover = function(r){
return function(){
open_div(r);
}
}(id);
elmm.onmouseout = function(r){
return function(){
hide_div(r);
}
}(id);
}
elmm.appendChild(document.createTextNode("● "+elm4.item(s).lastChild.nodeValue));
elm5.appendChild(elmm);
elm5.appendChild(document.createElement('br'));
}
s++;
}
function getStringByElement(element){
var i = -1;
var str = "";
var elm2;
var s = element.childNodes.length;
while(++i < s){
elm2 = element.childNodes.item(i);
if(elm2.hasChildNodes()){
str += getStringByElement(elm2);
}else{
str += (elm2.nodeType == 3) ? elm2.nodeValue : "";
}
}
return str;
}
function open_div(element,e1,e2){
var elems = document.getElementById(element);
var xx = 0;
var yy = 0;
if(!brz){
xx = window.event.clientX;
yy = window.event.clientY;
}else{
xx = e1+"px";
yy = e2+"px";
}
elems.style.position = "absolute";
elems.style.top = yy;
elems.style.left = xx;
elems.style.display = "block";
}
function hide_div(element){
document.getElementById(element).style.display = "none";
}
//-->
</script>


今回はFireFoxのトリッキーな挙動に苦戦した
動作条件は前回と同じ
IE6,FireFox1.07,NN7.1にて確認
例のごとく、面倒なのでこのブログで使われているまま載せている

また、

stjc.appendChild(document.createTextNode(getStringByElement(elm4.item(sr)).substr(0,10) + "......"));

の10を変更すれば、見出しとして出す部分の長さを調節できる
10じゃ短いと思う場合は15とか20ぐらいにしてもいいだろう

追記
引用(頭に>)を分かりやすくするためには?
ちょっとうざいFireFox
ページ内記事リストのところにプレビューとして内容をすこーしだけ表示させるようなものを作ろうとしているのだが、FireFoxだけEventの有効範囲などが違い、上手くいかない
とりあえずIEでは上手くいっているのでとりあえずIEだけやっておくことにした
FireFoxではtitle属性でもつけてやるしかないのか?

追記
なぜかFireFoxでは
obj.style.top
obj.style.left
が正常に作動しない
IEではもちろん、依然使ったページでは正常に作動していたのになぜだろう
obj.style.position

obj.style.displayは正常に作動しているようでますますわからない
topとleftに代入している値をalertで見てみたところ、ちゃんと数値が入っている
・・・バグ?

さらに追記
数値の後ろにpxをつけたところ正常に作動した
どうやら数値を指定するだけではいけないらしい
なぜ以前のページでつけなくても動いたのかがわからないが、そういうことなんだろう
ページ内の記事を一覧にする
今開いているページの記事へのリンクがないのが非常に不便に思ったのでJavaScriptで記事の名前及びページ内リンクを抽出してみることにした

下記のスクリプトをそのままの状態で正常に挙動させるためには
  • ID名がArticle_Listであるブロック要素が存在する

  • 記事の見出しの<div>要素のclass名がmainEntryTitleである

  • elm4,elm5,s,elmmの変数を予約していない
ことを満たしていなければ使えないが、相応のところを変更すればなんら支障なく使えるはずである


<script type="text/javascript">
<!--
elm4 = document.getElementsByTagName('div');
elm5 = document.getElementById('Article_List');
s = 0;
elm5.innerHTML = "";
while(s < elm4.length){
if(elm4.item(s).className == 'mainEntryTitle'){
var elmm = document.createElement('a');
elmm.setAttribute('href',"#"+""+elm4.item(s).firstChild.name);
elmm.appendChild(document.createTextNode("● "+elm4.item(s).lastChild.nodeValue));
elm5.appendChild(elmm);
elm5.appendChild(document.createElement('br'));
}
s++;
}
//-->
</script>



・・・めんどくさかったのでこのブログで使用しているコードと同一のものを載せているが、万が一不具合があるとも限らないのでそこら辺はご留意願いたい
見出し付きでリスト抽出
preタグ内の<br />タグを取り除く
以前の方法では<br />以外のタグも削除されてしまっていた
そこで今回は削除すべきエレメントかどうかを判別するようにしてみた
一応IE6,FireFox1.07,Netscape Navigator7.1に於いて期待する結果が得られたが、他のブラウザはインストールしていないためわからない
・・・けどまぁ、恐らく大丈夫だろう


<script type="text/javascript">
<!--
elm = document.getElementsByTagName('pre');
var s = 0;
while(s < elm.length){
var y = 0;
while(y < elm.item(s).childNodes.length){
if(elm.item(s).childNodes.item(y).tagName == 'BR'){
elm.item(s).removeChild(elm.item(s).childNodes.item(y));
}else{
y++;
}
}
s++;
}
//-->
</script>



ちゃんと他のタグが除去されていないかのテスト


動かない場合、elm.item(s).childNodes.item(y).tagNameをalertデバッグするなりして'BR'と等価か調べておき、もし小文字を返したりするようであればor条件文を付け加えるか、もしくは正規表現を使えばいいと思う
つーわけで動かないブラウザがあればコメントください
できるだけこちらで修正等したいと思います
注:そもそもDOMが未サポートのブラウザに対応させるのを要求するのはやめてください

追記:タグの内容が複数行にまたがる場合に除去されない恐れがある
これについてはまた次回で修正しようと思う
追記2:タグの途中で改行しているような(<img src="hoge.jph"[ここで改行して]alt="hoge">のような)場合にはそもそも正常にタグとして働かない恐れがある
・・・これは直せるのか?
preタグ内のタグを取り除く #2

<script type="text/javascript">
<!--
elm = document.getElementsByTagName('pre');
var s = 0;
while(s < elm.length){
var y = 0;
while(y < elm.item(s).childNodes.length){
if(elm.item(s).childNodes.item(y).nodeType == 3){
y++;
}else{
elm.item(s).removeChild(elm.item(s).childNodes.item(y));
}
}
s++;
}
//-->
</script>


これでいけた
ただ、テキストノード以外をすべて削除してしまうので、もし<pre>内に<img>とか入れてたらそれもさよならしてしまう
<br />だけを削除する
copyright © 2005 GEEKy Script Writer [perl and more!] all rights reserved.
Powered by FC2ブログ.