Window 对象
表示浏览器窗口,所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
DOM 中的 document 对象是 window 的成员之一,因此上一篇 JavaScript - BOM 实际上讲的是 window 的 document 成员对象
-
document 成员
<p id="p_window"></p> <script> a = "This is a global variable."; window.document.getElementById("p_window").innerHTML = window.a; </script>
window 成员变量
-
window.innerHeight:浏览器窗口的内部高度(包括滚动条)
-
window.innerWidth:浏览器窗口的内部宽度(包括滚动条)
<p id="p_window_variable"></p> <script> document.getElementById("p_window_variable").innerHTML = "Height: " + window.innerHeight + "Width" + window.innerWidth; </script>
window 成员方法
-
window.open():打开新窗口
<button onclick="openNewWindow()" style="margin: 12px 0px">Open new Window</button> <script> var newWindow; function openNewWindow(){ newWindow = window.open('', '', 'width=200, height=100'); newWindow.document.write("<p>This is a new Window</p>"); } </script>
-
window.focus():聚焦到窗口
<button onclick="focusNewWindow()" style="margin: 12px 0px">Focus new Window</button> <script> function focusNewWindow(){newWindow.focus();} </script>
-
window.moveTo():移动窗口
<button onclick="moveNewWindow()" style="margin: 12px 0px">Move new Window</button> <script> function moveNewWindow(){newWindow.moveTo(500, 100);newWindow.focus();} </script>
-
window.resizeTo():调整窗口尺寸
<button onclick="resizeNewWindow()" style="margin: 12px 0px">Resize new Window</button> <script> function resizeNewWindow(){newWindow.resizeTo(250, 250);newWindow.focus();} </script>
-
window.close():关闭窗口
<button onclick="closeNewWindow()" style="margin: 12px 0px">Close new Window</button> <script> function closeNewWindow(){newWindow.close();} </script>
-
window.alert():警告框
<button onclick="tiggerAlert()" style="margin: 12px 0px">Tigger alert box</button> <script> function tiggerAlert(){window.alert("This is a alert box!")} </script>
-
window.confirm():确认框
<button onclick="tiggerConfirm()" style="margin: 12px 0px">Tigger confirm box</button> <p id="p_confirm" style="text-align:center">RESULT</p> <script> function tiggerConfirm(){ var x; var r=confirm("This is a confirm box!"); if (r==true) x="You confirmed!"; else x="You canceled!"; document.getElementById("p_confirm").innerHTML=x; } </script>
RESULT
-
window.prompt():提示框
<button onclick="tiggerPrompt()" style="margin: 12px 0px">Tigger prompt box</button> <p id="p_prompt" style="text-align:center">RESULT</p> <script> function tiggerPrompt(){ var person=prompt("Please input your name: ","zohar"); if (person!=null && person!=""){ document.getElementById("p_prompt").innerHTML="Hello " + person + "!"; } } </script>
RESULT
-
window.setInterval():计时循环
-
window.clearInterval():清除计时循环
<button onclick="tiggerInterval()" style="margin:12px 0px">Tigger interval</button> <button onclick="stopInterval()" style="margin: 12px 0px">Stop interval</button> <p id="p_clock" style="text-align:center">Tigger to set an interval clock.</p> <script> var interval; function tiggerInterval(){ interval = window.setInterval(function(){ var time = new Date(); document.getElementById("p_clock").innerHTML=time.toLocaleTimeString(); }, 1000) }; function stopInterval(){window.clearInterval(interval);} </script>
Tigger to set an interval clock.
-
window.setTimeout():定时器
-
window.clearTimeout():清除定时器
<button onclick="tiggerTimeout()" style="margin:12px 0px">Tigger timeout</button> <button onclick="stopTimeout()" style="margin:12px 0px">Stop timeout</button> <p id="p_clock" style="text-align:center">Tigger to set a alert after 3 seconds.</p> <script> var timeout; function tiggerTimeout(){ timeout=window.setTimeout(function(){alert("Now is 3s later.")},3000); } function stopTimeout(){window.clearTimeout(timeout);} </script>
Tigger to set a alert after 3 seconds.
-
window.onload:入口函数
自加载,在页面加载完毕后(所有内容,包括外部图片)自动加载指定方法
<p id="p_auto_clock" style="text-align:center">This is a clock auto work.</p> <script> window.onload = function(){ interval = window.setInterval(function(){ var time = new Date(); document.getElementById("p_auto_clock").innerHTML=time.toLocaleTimeString(); }, 1000) }; </script>
This is a clock auto work.
成员对象
screen 对象
window.screen 对象包含有关用户屏幕的信息。
-
window.screen.availWith:可用的屏幕宽度
-
window.screen.availHeight:可用的屏幕高度
<p id="p_window_screen"></p> <script> document.getElementById("p_window_screen").innerHTML = "availHeight: " + window.scerrn.availHeight + ";\tavailWith" + window.screen.availWith; </script>
location 对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
-
location.hostname:返回 web 主机的域名
-
location.pathname:返回当前页面的路径和文件名
-
location.href:返回当前页面的 URL
-
location.port:返回 web 主机的端口 (80 或 443)
-
location.protocol:返回所使用的 web 协议(http 或 https)
-
location.assign():加载新的文档
<p id="p_window_location"></p> <hr/> <button onclick="goOtherPlace()" style="margin:12px 0px">Go</button> <script> document.getElementById("p_window_location").innerHTML = "hostname: " + window.location.hostname + "<hr/>pathname: " + window.location.pathname + "<hr/>href: " + window.location.href + "<hr/>port: " + window.location.port + "<hr/>protocol: " + window.location.protocol; function goOtherPlace(){ var theUrl=prompt( "Please input the web site: ","https://zoharyip.club" ); if (theUrl!=null && theUrl!=""){ window.location.assign(theUrl); } } </script>
history 对象
window.history 对象包含浏览器的历史。
-
history.back():后退
-
history.forward():前进
<button onclick="goBack()" style="margin:12px 0px">Go Back</button> <script> function goBack(){window.history.back()} </script>
navigator 对象
window.navigator 对象包含有关访问者浏览器的信息,navigator 可被用户修改,因此应该用于检测浏览器版本。
-
window.navigator.appCodeName
-
window.navigator.appName
-
window.navigator.appVersion
-
window.navigator.cookieEnabled
-
window.navigator.platform
-
window.navigator.userAgent
-
window.navigator.systemLanguage
<p id="p_window_navigator"></p> <script> document.getElementById("p_window_navigator").innerHTML = "Browser Code Name: " + navigator.appCodeName + "<br/>Browser Name: " + navigator.appName + "<br/>Browser Version: " + navigator.appVersion + "<br/>Browser Cookie Option: " + navigator.cookieEnabled + "<br/>Browser Hardware Platform: " + navigator.userAgent + "<br/>User Agency: " + navigator.userAgent + "<br/>User Agency Language: " + navigator.systemLanguage; </script>