リンクに関する制御について【XHTML&CSS&JavaScript】

質問

【XHTML&CSS】 リンク制御について
Webサイトにおいて、現在リンクの制御の方法をどうしたらいいのかわかりません。（JavaScriptについては初心者です。）
XHTMLのソース上においてリンクを以下のように記述し、
<ul>
<li><a href="../link/test1.html">テスト1</a></li>
<li><a href="../link/test2.html">テスト2</a></li>
<li><a href="../link/test3.html">テスト3</a></li>
<li><a href="../link/test4.html">テスト4</a></li>
</ul>
上記のようにリストを作成するが、テスト1からテスト3まではリンク先のファイルが存在するが、テスト4についてはファイルが存在しない。

この状態では、
通常であればテスト4は"404 Not Found「ページが存在しません。」などのエラーが表示されます。

これをCSSまたは、JavaScriptなどで制御して、
リンク先のファイル（test4.html）を探しに行って存在しない場合、
リンク先へ遷移させないようにはするにはどうしたら実現可能でしょうか？
よろしくお願いします。

回答No.3

yyr446 · ベストアンサー

「存在チェックして、なったらその<a>要素のリンクイベントを殺す
といった処理」は具体的にはどのような構成にすべきなのでしょうか？」

AJAX利用といっても同期通信ですが、</body>の直前に、下のJAVASCRIPT
を入れると、少なくとも自サイト内の存在チェックは出来ます。
あまり意味のある事とは思えないのですが．．．
<script type="text/javascript" charset="utf-8">
<!--
var links=document.getElementsByTagName("a");
for(var i=links.length-1;i>=0;i--){
var chk= ajax_chk(links[i].getAttribute("href"));
if (chk!=200 && chk!=0){;
//消す場合
links[i].parentNode.removeChild(links[i]);
/* 置き換える場合
var span= document.createElement("span");
span.innerHTML=links[i].getAttribute("href") +'は存在しません。';
links[i].parentNode.replaceChild(span,links[i]);
*/
}
}

function ajax_chk(url){
var xmlHttp =(window.ActiveXObject)?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest();
xmlHttp.open("GET",url,false);
try{
xmlHttp.send(null);
return xmlHttp.status;
}catch(e){
return 0;
}
}
// -->
</script>

お礼

yyr446さん、親切にご教授いただきありがとうございました。
教えていただいたソースでうまく動かすことができました。

補足

yyr446さんありがとうございます。

「存在チェックして、なったらその<a>要素のリンクイベントを殺す
といった処理」についてはyyr446さんから頂いた回答内にあった文字をコピペさせてもらいました。

「まあ、<a href="../link/test4.html">となっているから自分のサイト内のファイルなのでしょうね。それなら、ダミーのフレームに読み込ませるとか、非同期通信でHTTPリクエストするとかして、存在チェックして、なったらその<a>要素のリンクイベントを殺すといった処理で可能かもしれませんが。」
↑の中の文章を使用させていただき、それを実現するにはどうしたらいいのかわからず質問させていただきました。

本件については、
１．複数ページにわたって共通の構成（テンプレートであったりイメージマップなど）から
　　のリンク<a>のファイルをチェックする。
２．ファイルチェックにより存在すれば、そのままリンクを生かす。
３．存在しない場合はa="#"などに変更して遷移できない状態にする。
のような構成を実現したいのですが。

「あまり意味のある事とは思えないのですが．．．」
おっしゃられている通りかもしれません・・・
ですが、やってみたいという思いが先行していますので、最後までやりたいと思っています。結果できなかったとしても現在の自分にとってはプラスになると思っています。

回答No.4

yyr446

ついでに
「３．存在しない場合はa="#"などに変更して遷移できない状態にする。」
のやり方はNo.2のサンプルで
f (chk!=200 && chk!=0){;
links[i].setAttribute("href","javascript:void(0);");
}
とでもしておけばよい。href=#だと無駄な動作が起きるのでは...

お礼

yyr446さん、親切にご教授いただきありがとうございました。
教えていただいたソースでうまく動かすことができました。

回答No.2

yyr446

まあ、<a href="../link/test4.html">となっているから
自分のサイト内のファイルなのでしょうね。
それなら、ダミーのフレームに読み込ませるとか、
非同期通信でHTTPリクエストするとかして、
存在チェックして、なったらその<a>要素のリンクイベントを殺す
といった処理で可能かもしれませんが。
　苦労してやっても、ほとんどやる意味ないですね。
自分のサイトにあるページぐらい、しっかり管理して、リンクを
直すべきかと。
※私も、人のことは言えませんが......

補足

確かにyyr446さんの言うとおりかもしれませんが、
<ul></ul>内が各ページ共通である場合、
リンクを1つ修正すると他のページも全て修正しないといけない状態になります。これをいかに少ない時間で修正することが可能かを模索していて、質問させていただいた機能はできないものか考えていました。
自分のサイトではそうですが、他の方のサイトで仕事であればコストが削減できる内容であると思いますが。

非同期通信ということはAjaxを使用するということでしょうか？
JavaScriptおよびAjaxは現在勉強中でまだわからない部分が多いのですが、もしできましたら「非同期通信でHTTPリクエストするとかして、
存在チェックして、なったらその<a>要素のリンクイベントを殺す
といった処理」は具体的にはどのような構成にすべきなのでしょうか？

回答No.1

chochobizo

基本的に、javascriptはクライアントPCで動作するので、
クライアントPCから、サーバ側ファイル（test4.html）の
存在チェックを含め操作は出来ません。

asp,jsp,cgiなどサーバ側で制御します。