javascript操作window物件
阿新 • • 發佈：2019-01-22
document.defaultView或全域性變數window——獲取一個window物件；
1）獲取視窗資訊
innerHeight、innerWidth——獲取視窗內容區域的高度、寬度；
outerHeight、outerWidth——獲取視窗的高度、寬度（包含邊框和選單欄等）；
pageXOffset、pageYOffset——獲取視窗從左上角算起水平/垂直滾動過的畫素數；
screen——返回一個描述螢幕的Screen物件；
screen.availHeight、screen.availWidth——螢幕上可供顯示視窗部分的高度、寬度（排除工具欄和選單欄之外）；
screen.colorDepth——螢幕的顏色深度；
screen.height、screen.width——螢幕的高度、寬度；
screenLeft/screenX——獲取從視窗左邊緣到螢幕左邊緣的畫素（注意瀏覽器相容性）；
screenTop/screenY——獲取從視窗上邊緣到螢幕上邊緣的畫素（注意瀏覽器相容性）；
2）與視窗進行互動
blur()——讓視窗失去鍵盤焦點；
close()——關閉視窗（不是所有瀏覽器都允許某個指令碼關閉視窗）；
focus()——讓視窗獲得鍵盤焦點；
print()——提示使用者列印頁面；
scrollBy(<x>,<y>)——讓文件相對於當前位置進行滾動；
scrollTo(<x>,<y>)——滾動到指定的位置；
stop()——停止載入文件；
3）對使用者進行提示
alert(<msg>)——向用戶提示一個對話方塊視窗並等候其被關閉；
confirm(<msg>)——顯示一個帶有確認和取消提示的對話方塊視窗（返回一個布林值）；
prompt(<msg>,<val>)——顯示對話方塊提示使用者輸入一個值（返回字串）；
showModalDialog(<url>)——彈出一個視窗，顯示指定的URL;
4)history物件的屬性和方法
back()——在瀏覽歷史中後退一步；
forward()——在瀏覽歷史中前進一步；
go(<index>)——轉到相對於當前文件的某個瀏覽歷史位置。正值是前進，負值是後退；
length——返回瀏覽歷史中的專案數量；
pushState(<state>,<title>,<url>)——向瀏覽器歷史新增一個條目；
replaceState(<state>,<title>,<url>)——替換瀏覽器歷史中的當前條目；
state——返回瀏覽器歷史中關聯當前文件的狀態資料；
5）使用跨文件訊息傳遞
postMessage(<msg>,<origin>)——給另一文件傳送指定的訊息；
尋找內嵌的window:
defaultView——返回活動文件的window;
frames——返回文件內嵌iframe元素的window物件陣列；
opener——返回開啟當前瀏覽上下文環境的window；
parent——返回當前window的父window;
self——返回當前文件的window；
top——返回最上層的window；
length——返回文件內嵌的iframe元素數量；
[<index>]——返回指定索引位置內嵌文件的window；
[<name>]——返回指定名稱內嵌文件的window；
6）使用計時器
setTimeout(<function>,<time>)——建立一個計時器，等待time毫秒後呼叫指定的函式；
clearTimeout(<id>)——撤銷某個超時計時器；
setInterval(<function>,<time>)——建立一個計時器，每隔time毫秒呼叫指定的函式；
clearInterval(<id>)——撤銷某個時間間隔計時器；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>上海遠地資產管理有限公司</title>
<meta name="author" content="jason"/>
<meta name="description" content="上海遠地資產管理有限公司（簡稱：遠地資產），是一家專業的網際網路金融服務平臺."/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<style>
table{
border-collapse: collapse;
border:thin solid black;
}
th,td{
padding: 4px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>outerWidth:</th><td id="ow"></td><th>outerHeight:</th><td id="oh"></td>
</tr>
<tr>
<th>innerWidth:</th><td id="iw"></td><th>innerHeight:</th><td id="ih"></td>
</tr>
<tr>
<th>screen.width:</th><td id="sw"></td><th>screen.height:</th><td id="sh"></td>
</tr>
</table>
<p id="buttons1">
<button id="scroll">scroll</button>
<button id="print">print</button>
<button id="close">close</button>
</p>
<p id="buttons2">
<button id="alert">alert</button>
<button id="confirm">confirm</button>
<button id="prompt">prompt</button>
<button id="modal">modal dialog</button>
</p>
<p id="buttons3">
<button id="back">back</button>
<button id="forward">forward</button>
<button id="go">go</button>
</p>
<p id="buttons4">
<button id="banana">banana</button>
<button id="apple">apple</button>
</p>
<p id="msg"></p>
<p>
遠地本著“構築誠信，永續發展”的理念為客戶提供專業的理財服務、財富管理以及產品方案推薦。
遠地都進來看看撒將通過自身的專業優勢和有效的資訊交流平臺，為資金富裕方和資金需求方打造一個專業，誠信，共贏，睿智的服務平臺，
幫助客戶實現穩定、安全的財富增值，幫助更多優秀的中小型企業融資成功。
<img id="sohu" class="img" name="xw" src="images/xw_sohu.png" alt="sohu"/>
遠地本著“構築誠信，永續發展”的理念為客戶提供專業的理財服務、財富管理以及產品方案推薦。
遠地都進來看看撒將通過自身的專業優勢和有效的資訊交流平臺，為資金富裕方和資金需求方打造一個專業，誠信，共贏，睿智的服務平臺，
幫助客戶實現穩定、安全的財富增值，幫助更多優秀的中小型企業融資成功。
<img id="xw" class="img" src="images/xw_china.png" alt="新聞網圖示"/>
遠地本著“構築誠信，永續發展”的理念為客戶提供專業的理財服務、財富管理以及產品方案推薦。
遠地都進來看看撒將通過自身的專業優勢和有效的資訊交流平臺，為資金富裕方和資金需求方打造一個專業，誠信，共贏，睿智的服務平臺，
幫助客戶實現穩定、安全的財富增值，幫助更多優秀的中小型企業融資成功。
</p>
<p id="status">Ready</p>
<button id="send">Send Message</button>
<p>
<iframe name="nested" src="http://localhost:63342/IDEA-workspace/Demotest/otherdomain.html" width="90%" height="100px"></iframe>
</p>
<p id="msg2"></p>
<p id="buttons5">
<button id="settime">Set Time</button>
<button id="cleartime">Clear Time</button>
<button id="setinterval">Set Interval</button>
<button id="clearinterval">Clear Interval</button>
</p>
<script>
//獲取視窗資訊
document.getElementById("ow").innerHTML=window.outerWidth;
document.getElementById("oh").innerHTML=document.defaultView.outerHeight;
document.getElementById("iw").innerHTML=window.innerWidth;
document.getElementById("ih").innerHTML=window.innerHeight;
document.getElementById("sw").innerHTML=window.screen.width;
document.getElementById("sh").innerHTML=window.screen.height;
</script>
<script>
//與視窗進行互動
var buttons=document.getElementById("buttons1").getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress;
}
function handleButtonPress(e){
if(e.target.id=="print"){
window.print();
}else if(e.target.id=="close"){
window.close();
}else{
window.scrollTo(0,800);
}
}
</script>
<script>
//對使用者進行提示
var buttons2=document.getElementById("buttons2").getElementsByTagName("button");
for(var i=0;i<buttons2.length;i++){
buttons2[i].onclick=handleButtonPress2;
}
function handleButtonPress2(e){
if(e.target.id=="alert"){
window.alert("這是一個提示框");
}else if(e.target.id=="confirm"){
var confirmed=window.confirm("這是一個確認框，確定要繼續？")
alert("確定嗎？"+confirmed);
}else if(e.target.id=="prompt"){
var response=window.prompt("輸入一個單詞","hello");
alert("這個單詞是："+response);
}else if(e.target.id=="modal"){
window.showModalDialog("http://www.sina.com.cn");
}
}
</script>
<script>
//在瀏覽歷史中導航
var buttons3=document.getElementById("buttons3").getElementsByTagName("button");
for(var i=0;i<buttons3.length;i++){
buttons3[i].onclick=handleButtonPress3;
}
function handleButtonPress3(e){
if(e.target.id=="back"){
window.history.back();
}else if(e.target.id=="forward"){
window.history.forward();
}else if(e.target.id=="go"){
window.history.go("http://www.sina.com.cn");
}
}
</script>
<script>
//向瀏覽歷史新增一個條目
var sel="no selection made";
if(window.location.search=="?banana"){
sel="Selection:Banana";
}else if(window.location=="?apple"){
sel="Selection:Apple";
}
document.getElementById("msg").innerHTML=sel;
var buttons4=document.getElementById("buttons4").getElementsByTagName("button");
for(var i=0;i<buttons4.length;i++){
buttons4[i].onclick=function(e){
document.getElementById("msg").innerHTML= e.target.innerHTML;
//window.history.pushState("","","otherdomain.html?"+ e.target.id);
//替換瀏覽器歷史中的當前條目
window.history.replaceState("","","otherdomain.html?"+ e.target.id);
}
}
</script>
<script>
//跨文件問題
document.getElementById("send").onclick=function(){
//定位window物件並呼叫postMessage方法
window["nested"].postMessage("I like apples","http://localhost:63342");
document.getElementById("status").innerHTML="Message Sent";
}
</script>
<script>
var buttons5=document.getElementById("buttons5").getElementsByTagName("button");
for(var i=0;i<buttons5.length;i++){
buttons5[i].onclick=handleButtonPress4;
}
var timeID;
var intervalID;
var count=0;
function handleButtonPress4(e){
if(e.target.id=="settime"){
timeID=setTimeout(function(){
displayMsg("Timeout Expired");
},5000);
displayMsg("Timeout set");
}else if(e.target.id=="cleartime"){
clearTimeout(timeID);
displayMsg("Timeout cleared");
}else if(e.target.id=="setinterval"){
intervalID=setInterval(function(){
displayMsg("Interval Expired. Counter:"+count++);
},2000);
displayMsg("Interval set");
}else if(e.target.id=="clearinterval"){
clearInterval(intervalID);
displayMsg("Interval cleared");
}
}
function displayMsg(msg){
document.getElementById("msg2").innerHTML=msg;
}
</script>
</body>
</html>otherPage程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Other Page</title>
</head>
<body>
<h1 id="banner">This is the nested document</h1>
<script>
//監聽message事件
window.addEventListener("message",receiveMessage,false);
function receiveMessage(e){
if(e.origin=="http://localhost:63342"){
displayMessage(e.data);
}else{
displayMessage("message discarded");
}
}
function displayMessage(msg){
document.getElementById("banner").innerHTML=msg;
}
</script>
</body>
</html>