視窗篇
- 警告對話方塊
alert("HI你好");
- 確認對話方塊
ret = confirm("可以加你朋友嗎"); //ret回傳值(true/false)
- 顯示網頁對話方塊
可以顯示一個對話方塊，此對話方塊是另一個網頁的內容
features = "dialogWidth:300px;dialogHeight:200px;status=no"; // 設定對話方塊CSS
showModalDialog("dialog.html",window,features);
- 以頂層模式顯示網頁對話方塊
不同於showModalDialog的地方是，顯示對話方塊後還可以同時操作原本後面的網頁視窗
features = "dialogWidth:300px;dialogHeight:300px;status-no";
showModelessDialog(dialog.html,window,features);
- 取得瀏覽器視窗大小
var width = document.body.clientWidth;
var height = document.body.clientHeight + 125; //瀏覽器網址，工具列...
- 取得螢幕大小
var width = screen.width;
var height = screen.height;
- 不能改變大小的視窗
一但改變視窗大小就觸發<body> onResize事件
<body onResize="window.resize(400,300)">
- 指定瀏覽器視窗位置
window.moveTo(200,100); //(距離螢幕左邊的距離，距離螢幕頂部的距離)
- 震動的視窗
window.top.moveBy(0,i); //相對移動
- 視窗縮小效果(IE)
resizeTo(width,height);
moveTo( (screen.height-height)/2 , (screen.width-width)/2 );
- 視窗自動捲動
window.scrollBy(1,0); // 0 , 正 , 負 值的六種組合方向
<body onLoad="setInterval('window.scrollBy(0,1)',50)">
- 去掉視窗捲軸
定義body的CSS
body{overflow:scroll;overflow-x:hidden;overflow-y:hidden;}
- 讓捲軸從左邊出現
<body dir="rtl">
- 改變捲軸的樣式CSS
body
{
scrollbar-face-color : # ffd0d0 //捲軸表單顏色
scrollbar-highlight-color : ffffff //高光顏色
}
- 視窗失焦事件
body
{onBlur="alert('out of focus')"}
- 彈出新網頁視窗
window.open("newPage.html");
- 彈出無屬性列網頁視窗
window.open("newPage.html","","top=100,left=300,width=300,height=200");
- 彈出視窗狀態
window.open("newPage.html',"","HERE");
fullscreen=yes //全螢幕
menubar=yes //功能表
toolbar=yes //標準按鈕列，下一頁
location=yes //網址
status=yes //底下狀態列
scrollbar = yes //有捲軸
resize=yes //允許調整視窗
- 關閉視窗
self.close()
window.close()
- 在主視窗關閉彈出視窗
p = window.open('newPage.html');
p.close();
- 在彈出視窗關閉主視窗
opener.close();
- 將主視窗的資料輸出到彈出視窗
var p = window.open("receive.html","","width=300,height=200,top=300,left=800");
var msg = textID.value;
p.document.write("<p>" + msg + "</p>");
- 自動關閉視窗
setTimeout(self.close(),5000);
setTimeout(myfunction,5000); //不可myfunction()
- Reference
JavaScript實用範例辭典-孫俊平
沒有留言:
張貼留言