strictで新規ウィンドウを立ち上げる

サンプル

使い方

サンプルの(x)html

<p><a href="/">通常のリンク</a></p>
<p><a href="/" class="newWin">新規ウィンドウで開くリンク</a></p>
<p><a href="/" class="newWinIcon">新規ウィンドウで開く場合にはアイコンを付与するリンク</a></p>

新規ウィンドウで開きたい場合には、aタグにclass名（デフォルトは「newWin」）を追加し、新規ウィンドウで開きたいリンクにアイコンを付与する場合は、aタグにclass名（デフォルトは「newWinIcon」）を追加します。

Javascript（tk1975_config.jsへの記述例）

function newWin(){
var newWin = "newWin"
tk1975_newWin(newWin);
}
prepareOnloadFunction(newWin);

• ※変数「newWin」の値に、新規ウィンドウで開きたい場合のaタグに設定したclass名（デフォルトは「newWin」）を記述
• ※関数「prepareOnloadFunction」に関しては、「DOM Scriptingを利用する上で知っておくべきこと」を参照してください。

function newWinIcon(){
var area_id = "";
var newWinIcon = "newWinIcon";
var icon_src = "/img/icon/newWin.gif";
var icon_over_src = "/img/icon/newWin_over.gif";
tk1975_newWinIcon(area_id,newWinIcon,icon_src,icon_over_src);
}
prepareOnloadFunction(newWinIcon);

• ※変数「area_id」の値に、新規ウィンドウで開くaタグにアイコンを設置したいエリアのid名（デフォルトはドキュメント全体）を記述
  id名で制御することで、エリアごとにアイコンを出し分けることができます。
• ※変数「newWinIcon」の値に、新規ウィンドウで開きたい場合のaタグ、かつaタグの終わりにアイコンを追加した場合に設定したclass名（デフォルトは「newWinIcon」）を記述
  class名は上記で指定したnewWinの変数名が必ず含まれるようにしてください。
• ※変数「icon_src」の値に、アイコンのパスを指定
• ※変数「icon_over_src」の値に、aタグにマウスオーバー時のアイコンのパスを指定
• ※関数「prepareOnloadFunction」に関しては、「DOM Scriptingを利用する上で知っておくべきこと」を参照してください。

思考回路

〜 tk1975_newWin(newWin); の流れ〜

1. ドキュメント内のaタグをすべて抽出
2. aタグに新規ウィンドウで開きたい場合のaタグに設定したclass名（デフォルトは「newWin」）があるすべてを抽出
3. そのaタグがクリックされたら、新規ウィンドウ表示する

〜 tk1975_newWinIcon(area_id,newWinIcon,icon_src,icon_over_src); の流れ〜

1. あるエリア（area_idの値）内のaタグをすべて抽出
2. そのaタグに新規ウィンドウで開き、かつアイコンを表示させたいaタグに設定したclass名（デフォルトは「newWinIcon」）があるすべてを抽出
3. そのaタグにアイコンを表示させる
4. マウスオーバーした場合、マウスアウトした場合にアイコンが変わるように指定

解説 〜 tk1975_eventClick(area_id,elem,link_target); の詳細〜

〜 tk1975_newWin(newWin); の流れ〜

Javascript（tk1975.js）

1. function tk1975_newWin(className){
2. if(!document.getElementsByTagName("a")) return false;ドキュメント内にaタグがない場合、処理を中止
3. var links = document.getElementsByTagName("a");ドキュメント内のaタグをすべて抽出
4. for(var i=0; i<links.length; i++){
5. if(links[i].className.indexOf(className) == -1) continue;aタグのclass属性値に「className」が含まれていない場合、次のaタグを調査
6. if(links[i].className.indexOf(className) != -1){【6-12】aタグのclass属性値に「className」が含まれている場合の処理
7. links[i].onclick = function(){【7-11】クリックした場合の処理
8. var hrefTxt = this.getAttribute("href");aタグのhref属性値を調べる
9. window.open(hrefTxt,"","");先に抽出したhref値を新規ウィンドウで開く
10. return false;hrefで指定したリンク先を無効にする
11. }
12. }
13. }
14. }

〜 tk1975_newWinIcon(area_id,newWinIcon,icon_src,icon_over_src); の流れ〜

Javascript（tk1975.js）

1. function tk1975_newWinIcon(area_id,className,icon_src,icon_over_src){
2. if(area_id == ''){【3-5,8】area_idの指定がない場合、ドキュメントを対象とする
3. var area = document.getElementsByTagName("body")[0];
4. }else{
5. if(!document.getElementById(area_id)) return false;area_idがドキュメント内にない場合、処理を中止
6. var area = document.getElementById(area_id);
7. }
8. if(!area.getElementsByTagName("a")) return false;area_id内、もしくはドキュメント内にaタグがない場合、処理を中止
9. var links = area.getElementsByTagName("a");area_id内のaタグ、すべて抽出
10. for(var i=0; i<links.length; i++){
11. if(links[i].className.indexOf(className) == -1) continue;aタグのclass属性値にclassNameがない場合、次のaタグを調査
12. if(links[i].className.indexOf(className) != -1){【12-29】aタグのclass属性値にclassNameがある場合の処理
13. 【13-16】アイコン画像の先読みvar iconImgOut = new Image();
14. iconImgOut.src = icon_src;
15. var iconImgOver = new Image();
16. iconImgOver.src = icon_over_src;
17. 【17-19】アイコン画像作成var icon_img = document.createElement("img");
18. icon_img.setAttribute("src",icon_src);
19. icon_img.setAttribute("alt","新規ウィンドウ表示");
20. links[i].appendChild(icon_img);aタグ内の最後にアイコン画像を設置
21. links[i].onmouseover = function(){【21-24】リンクにマウスオーバーした場合の処理
22. var link_icon = this.getElementsByTagName("img");
23. link_icon[link_icon.length-1].setAttribute("src",icon_over_src);
24. }
25. links[i].onmouseout = function(){【25-29】リンクからマウスアウトした場合の処理
26. var link_icon = this.getElementsByTagName("img");
27. link_icon[link_icon.length-1].setAttribute("src",icon_src);
28. }
29. }
30. }
31. }

• ※tk1975_newWinIcon(area_id,newWinIcon,icon_src,icon_over_src); はアイコンを表示させるためだけなので、tk1975_eventClick(area_id,elem,link_target);と合わせて利用するようにしてください。

コメント＆トラックバック

この記事に関するご意見・ご感想をお聞かせください

この記事へのトラックバック

http://search-result.org/mt-tb.cgi/5