JavaScript Window物件與使用者互動
阿新 • • 發佈:2018-10-31
前言:Window物件是開啟瀏覽器視窗,可以控制視窗的大小和位置、視窗彈出框、開啟和關閉視窗。控制視窗顯示位址列,工具欄。還可以控制是否過載網頁、返回上一個或下一個文件。
1、警告對話方塊
window.alert(str);
程式碼片段:
<html> <body> <script type="text/javascript"> function win(){ window.alert("你好,我是一個警告框!"); } win(); </script> </body> </html>
結果顯示:
2、視窗開啟和關閉
window.open(url, "","");
程式碼片段:
<html> <body> <script type="text/javascript"> function win(){ window.open("https://blog.csdn.net/Rison_Li","",""); } win(); </script> </body> </html>
顯示結果:
開啟一個new視窗:
window.open("https://blog.csdn.net/Rison_Li","new");
開啟一個指定大小的視窗:
window.open("https://blog.csdn.net/Rison_Li","new","height = 100, width = 200");
開啟一個帶滾動條的視窗:
window.open("https://blog.csdn.net/Rison_Li","new","scrollbars,resizable");
關閉當前視窗:window.close();
3、詢問回答框
window.confirm(str);
程式碼片段:
<html>
<body>
<script type="text/javascript">
function win(){
var test = window.confirm("是否要關閉瀏覽器?");
if(test == true) window.close();
}
win();
</script>
</body>
</html>
顯示結果:
4、視窗滾動
window.scrolly(x,y);
程式碼片段:
<script type="text/javascript">
var x = 0;
function win(){
x++;
window.scroll(0,x);
clearTimeout(t);
var t = setTimeout("win()",10);
}
win();
</script>
顯示結果:
5、訪問視窗歷史
程式碼片段:
<a href = "javascript:window.history.go(-1);">後退</a>
<a href = "javascript:window.history.back(2);">前進</a>
<a href = "javascript:window.history.go(window.historylength-1);">末尾</a>
6、視窗事件
程式碼片段:
<html>
<body onfocus="a1();" onblur="a2();">
<script language="javascript">
function a1(){
document.write("視窗獲得焦點");
}
function a2(){
document.write("視窗失去焦點");
}
</script>
</body>
</html>
顯示結果:
其他事件:
onload:文件載入時響應
onunload:文件未載入時響應
onresize:使用者改變視窗大小響應
onerror:javascript錯誤時,觸發錯誤處理事件
7、自動調整解析度
程式碼片段:
<html>
<body onload="size();">
<script language="javascript">
function size(){
window.resizeTo(screen.width - 100,screen.height - 100);
}
</script>
</body>
</html>
希望對你有幫助,學會window物件對視窗進行一些簡單的控制。