gooの簡単ホームページでの「置換」について

質問

gooの簡単ホームページでＨＰを開設しているものです。
ここでは、掲示板やログなどのページに、いたるところ
他のメンバーのＨＰへのリンクがはられており、
簡単にメンバー間の行き来ができて、たいへん便利なのですが、
このリンクのターゲット指定が「_top」になっているので、
リンク先が同一画面に上書きされてしまうことになり、
自分のＨＰに戻るのが少々面倒です。
そこで、ターゲット指定を「_blank」にして
新しい画面を開くようにしたいと思いました。
javascript のことはなにもわかりませんでしたが、
あちこちからいろいろ情報をかき集めて、
以下のようなスクリプトをデタラメに作りました。

<script type=text/javascript>
<!--
document.write('<div id=test>');
window.onload=chikan;
function chikan(){
a=test.innerHTML;
b=a.split('_top').join('_blank');
test.innerHTML=b;
}
// -->
</script>

これで（不思議なことに）何の問題もなく、動作していますが、
実のところ、なんのことやらさっぱりわかっていません！
まずわからないのは、どうして<div>というタグが必要なのか、
あと、innerHTML というのは IE しかサポートしていないとか、
いろいろ問題もありそうです。
今後 javascript をもう少し勉強しようかなと思っていますので、
このスクリプトをスマートにする方法とか、別な方法とかありましたら、
なんでもけっこうですので御教示よろしくお願いします。

回答No.2

noname#199778 · ベストアンサー

質問文のソースについてですが、一行ずつ処理を分けて解釈していくとよいと思います。

＞document.write('<div id=test>');

この行は、testというIDをもつdiv要素の開始タグを吐き出しています。 これ以後のソースはすべて、testというIDを持つdiv要素に含まれるということになります。

＞window.onload=chikan;

window.onloadは、そのページがロードされた時に右辺の処理を行わせる記述になります。 この場合、その下の行で指定しているchikanという関数を処理させるようになっています。

＞function chikan(){

この行は、これ以降の{}内に含まれる一連の処理を、chikanという関数として定義することを示しています。

＞a=test.innerHTML;

aという変数の中に、testというIDのdiv要素に含まれるHTMLを格納します。 この場合、このスクリプトが置かれている行以降すべてのHTMLソースがaの中に格納されます。

＞b=a.split('_top').join('_blank');

これは、少し分けて解釈する必要があると思います。
まず、「a.split('_top')」という処理ですが、これは「_top」という文字を区切りの文字として、aに入っている文字列を分割して配列として返します(このとき、_topという文字列は区切りの文字として排除されます)。
次に、「.join('_blank')」の部分ですが、これは「a.split('_top')」という処理で作られた配列に対し、その要素を「'_blank'」という文字を区切り文字として結合する処理になります。 その二つの処理を終えた文字列を、変数bに格納させています。
この処理を例を挙げて追うと、
「<a href=***.html target=_top>りんく</a>」
という文が変数aの中にあるとして、はじめのsplitでこの文字列は、
「<a href=***.html target=」
「>りんく</a>」
の二つの配列要素に分割されます(_topは区切り文字として除去)。 次いで、join('_blank')により、_blankという文字を区切りとしてこの配列が結合され
「<a href=***.html target=」+「_blank」(←区切り文字)+「>りんく</a>」
となり、変数bには
「<a href=***.html target=_blank>りんく</a>」
が渡されます。 (実質的に、_topが_blankに書き換わっています)

＞test.innerHTML=b;

testというIDを持つdiv要素の中身を、変数bに置き換えます。 結果的に、ページ内のリンクにあるすべての_topというターゲット指定が、_blankに書き換えられます。

一連の処理を追うと、こういった内容になっているようです。
この記述ですが、先にも指摘のあるように、IE4以降のみが対応しているJavaScriptの書き方になりますので、それ以外のブラウザではエラーを出し、狙い通りの動作にならない可能性があります。
これと同じ効果をもつスクリプトを別に書くとしたら、私の場合は以下のように書きます。

<script type='text/JavaScript'>
<!--
function tarchange(){
if (document.links){
for (i=0; i<document.links.length; i++){
if (document.links[i].target=='_top'){
document.links[i].target='_blank';
}
}
}
}

window.onload=tarchange;
// -->
</script>

これは、JavaScriptがリンクをdocument.linksという配列オブジェクトに格納して管理していることと、document.links[x].targetで各リンクのtarget指定を取得・書き換えできることを利用して、すべてのリンクに対してtarget属性の内容をチェックし、それが_topだった場合には_blankに書き換えるように処理しています。
効果としては質問にあるものと同一ですが、こちらはIE4以降以外でも動作してくれると思います。 一応、IE6、Netscape7、Opera7.11で動作確認を取ってあります。

参考になれば。 長々と失礼しました。

お礼

懇切丁寧なご回答ありがとうございました。
おかげで驚くほどすっきりと理解することができました。

とくに split と join のところの説明は
明解で目からウロコが落ちました。
（「gooの簡単ホームページ」では半角のカンマ「,」が使えないので、
replace が使えないのです）

また document.links という便利な使い方もあるんですね。
まだまだ覚えることがたくさんあるようです。

ご回答、ほんとうに参考になりました。
お礼が遅くなって申し訳ありませんでした。

回答No.1

nuruhho44

<div id=test>はBODY内の全要素を参照するためにidを付けたのではないかと思います。閉じタグが省略されているようですね。

innerHTMLはＤＯＭ対応ブラウザ（最近のものはたいがいＯＫ）なら使えますが、この記述の仕方はＩＥ独自かもしれません。

document.getElementById("test").innerHTML = b;

と書けば他のブラウザでも理解してくれるでしょう。（ただし、昔のIE4では逆に動作しなくなる。NN4は論外）

どうせＤＯＭを使うのであれば、

B = document.getElementsByTagName("A");
for (i=0; i<B.length; i++) {
if (B[i].target == "_top") B[i].target = "_blank";
}

とすれば、全てのAタグ情報をチェックして、target属性が_topなら_blankにせよということになりますので、より確実だと思います。

置換については、

b = a.replace(/_top/g,"_blank");

という置換用の命令があります。

お礼

お礼が遅くなって申し訳ありません。

ここしばらく参考書片手にいろいろ勉強しておりました。
最初は回答の内容もよくわからなかったのですが、
（ＤＯＭってなに？　とか）
だいぶわかるようになりました。
タグ内の要素は簡単に操作できるものなのですね。

＞<div id=test>はBODY内の全要素を参照するためにidを付けたのではないかと思います。
＞閉じタグが省略されているようですね。

なるほど、わざと閉じタグを省略しているわけですね。
おもしろいテクニックだと思いました。
邪道でしょうけれど。

本当に丁寧な回答でたいへん参考になりました。
ありがとうございました。