★ 簡易ブラウザチェック
★ リンクを新規ウィンドウで開く
★ ウィンドウを閉じる
★ 画像を IE・NN で扱う
★ マウスドラッグ
★ 文字列の書き込み
コード
var IE,NN; if(document.all){ IE = true; }else if(document.getElementById){ NN = true; }
説明
サポートされていれば true を返し、サポートされていなければ false を返します。これで簡易的にブラウザを判断したものです。
document.all はIEだけです。document.getElementById はNN6以上とIE5以上です。
コード
function newWindow(url,name,option){ window.open(url,name,option); } <A href="javascript:newWindow('test.html','','')">～</A>
説明
リンクで新規ウィンドウを開く時は、関数を使いましょう。そうしないと元のページがオブジェクト名[object]にジャンプしてしまいます。
| 新規ウィンドウ× |
← |
<A href="javascript:window.open('test.html','','')">新規ウィンドウ×</A> |
|
|
このページがオブジェクト名[object]にジャンプしてしまいます。 |
| 新規ウィンドウ○ |
← |
<A href="javascript:newWindow('test.html','','')">新規ウィンドウ○</A> |
|
|
このページはそのままです。 |
コード
window.close();
説明
ウィンドウを閉じます。IEの場合、セキュリティーのために自分自身が開いたウィンドウ以外は確認ダイアログが出ます。
| ウィンドウを閉じる例 |
← |
「閉じる」ボタンを押すとウィンドウを閉じます。 |
| http://www.nona.dti.ne.jp/~jimita/web/close.html |
← |
これを新規ウィンドウで直接開き、「閉じる」ボタンを押すと確認ダイアログが出ます。 |
コード
<STYLE type="text/css"> <!-- .img { position:absolute; visibility:hidden; } --> </STYLE> <SCRIPT language="JavaScript"> <!-- ////////// ブラウザチェック ////////// var IE,NN; if(document.all){ IE = true; }else if(document.getElementById){ NN = true; } ////////// 画像を表示 ////////// function obj_show(name){ if(IE){ document.all(name).style.visibility = "visible"; } if(NN){ document.getElementById(name).style.visibility = "visible"; } } ////////// 画像を非表示 ////////// function obj_hide(name){ if(IE){ document.all(name).style.visibility = "hidden"; } if(NN){ document.getElementById(name).style.visibility = "hidden"; } } ////////// 画像を変更する ////////// function obj_img(imgname,imgsrc){ document.images[imgname].src = imgsrc; } ////////// 画像を移動する ////////// function obj_move(name,x,y){ if(IE){ document.all(name).style.pixelLeft = x; document.all(name).style.pixelTop = y; } if(NN){ document.getElementById(name).style.left = x + "px"; document.getElementById(name).style.top = y + "px"; } } ////////// 画像の大きさを変更する ////////// function obj_resize(imgname,w,h){ document.images[imgname].width = w; document.images[imgname].height = h; } //--> </SCRIPT> <!-- 画像ファイル --> <DIV class="img" id="IMG1"> <IMG src="jsayer1.gif" name="IMGNAME1"> </DIV>
説明
画像は <DIV> を使います。
最初は画像を非表示にします。そのため <DIV> にスタイルシートを使用します。このとき position が必要です。absolute
または relative でないとダメなようです。
コード内では、<DIV>は id 属性を、<IMG>は name 属性を使います。
画像の例
コード
////////// ブラウザチェック ////////// var IE,NN; if(document.all){ IE = true; }else if(document.getElementById){ NN = true; } ////////// マウスカーソルが移動した時 ////////// function mmove(evt){ ： return false; } ////////// マウスボタンが押された時 ////////// function mdown(evt){ ： return false; } ////////// マウスボタンが離された時 ////////// function mup(evt){ ： } ////////// イベント ////////// window.document.onmouseup = mup; window.document.onmousedown = mdown; window.document.onmousemove = mmove;
説明
マウスドラッグでオブジェクトを動かす方法です。
オブジェクト上で mousedown が起きた後、mouseup が起きる前マウスカーソルを移動させると、mousemove イベントが取得できません。
これを回避するために、mousedown 処理内で falseを返します。これで mousemove イベントが取得できるようになります。
コード
////////// ブラウザチェック ////////// var IE,NN; if(document.all){ IE = true; }else if(document.getElementById){ NN = true; } function msg_set(name,str){ if(IE){ document.all(name).innerHTML = str; } if(NN){ document.getElementById(name).innerHTML = str; } } <!-- 文字列 --> <SPAN id="STR1">～</SPAN>
説明
文字列を書き込む方法です。
文字列用のオブジェクトとして<SPAN>
コード
フレームのソース（frame_link2.html） <FRAMESET cols="20%,*"> <FRAME src="frame_link_index2.html"> <FRAMESET rows="50%,*"> <FRAME src="frame1.html" name="framewindow1"> <FRAME src="frame2.html" name="framewindow2"> </FRAMESET> </FRAMESET> 左側のフレームのソース（frame_link_index2.html） <HEAD> <SCRIPT language="javascript"> <!-- function link1(){ top.framewindow1.location.href = "frame1.html"; top.framewindow2.location.href = "frame2.html"; } function link2(){ top.framewindow1.location.href = "frame3.html"; top.framewindow2.location.href = "frame4.html"; } // --> </SCRIPT> </HEAD> <BODY> <A href="#" onClick="link1();">フレーム1</A><BR> <A href="#" onClick="link2();">フレーム2</A> </BODY>
説明
一度に２つのフレームを書き換える方法です。１つのフレームだけならばタグだけで可能ですが、２つ同時に書き換えるには Javascriptを使用します。
リンクの例