HTML DOM 快速導覽 - window 物件

window 物件有以下的屬性 (attribute) 與方法 (method)

window 物件的屬性
名稱型態描述
window.closedBoolean回傳 window 視窗是否被關閉
window.documentdcument回傳網頁文件的 document 物件
window.frameElement回傳內嵌元素的參考物件
window.frames回傳網頁中所有內嵌網頁的的集合物件
window.historyhistory回傳記錄瀏覽器走過頁面的 history 物件
window.locationlocation回傳記錄瀏覽器頁面資訊的 location 物件
window.innerHeightNumber回傳瀏覽器視窗內的網頁內容高度
window.innerWidthNumber回傳瀏覽器視窗內的網頁內容寬度
window.lengthNumber回傳 window 中 <frame> 或 <iframe> 的數量
window.nameString用以設定 window 的 name 屬性
window.navigatornavigator記錄瀏覽器相關資訊的 navigator 物件
window.opener回傳開啟 window 視窗的物件參考
window.outerHeightNumber回傳瀏覽器視窗的高
window.outerWidthNumber回傳瀏覽器視窗的寬
window.pageXOffsetNumber同 window.scrollX ，記錄網頁在捲軸的水平方向位移量
window.pageYOffsetNumber同 window.scrollY ，記錄網頁在捲軸的垂直方向位移量
window.parent回傳目前 window 視窗或是子框架的親代物件
window.screenscreen回傳 screen 物件，其記錄使用者電腦螢幕的相關資訊
window.screenXNumber回傳 window 視窗在螢幕的 x 座標
window.screenYNumber 回傳 window 視窗在螢幕的 y 座標
window.scrollMaxXNumber回傳捲軸的最大水平位移量
window.scrollMaxYNumber回傳捲軸的最大垂直位移量
window.scrollXNumber回傳捲軸的水平位移量
window.scrollYNumber回傳捲軸的垂直位移量
window.self回傳 window 本身的參考，通常用來判斷是否為子框架
window.status用以設定或存取狀態列
window.top回傳最頂層 window 的參考


window 物件的方法
名稱描述
window.close()用為關閉新增的 window 視窗
window.open(sU, sN, sF)用為開啟新增的 window 視窗
window.alert()用來新增提示（警告）訊息的對話視窗
window.back()用來回到上一頁
window.blur()使 window 視窗失去焦點
window.focus()使 window 視窗取得焦點
window.clearInterval(id)取消 setInterval() 設定的間隔時間重複動作
window.setInterval(f, d)設定的間隔時間重複動作
window.clearTimeout(id)取消 setTimeout() 所設定固定時間後的動作
window.setTimeout(f, d)設定固定時間後的動作
window.confirm(m)新增確認的對話視窗
window.escape(r)用來進行跳脫字元的編碼
window.unescape(e)用來回復 escape() 編碼過的字串
window.forward()用來進入下一頁
window.getComputedStyle(e)取得元素 CSSStyleDeclaration 型態的 style 物件
window.home()連回瀏覽器設定的首頁網址
window.moveBy(x, y)用來移動 window 視窗
window.moveTo(x, y)用來移動 window 視窗到指定的座標
window.print()啟動列印的視窗
window.prompt(t, v)啟動文字輸入的提示視窗
window.resizeBy(x, y)用來調整 window 視窗的大小
window.resizeTo(x, y)用來調整 window 視窗到指定的大小
window.scroll(x, y)用來捲動網頁的捲軸到指定的網頁座標
window.scrollBy(x, y)用來捲動網頁的捲軸
window.scrollByLines(n)依行數捲動網頁的捲軸
window.scrollByPages(n)依頁數捲動網頁的捲軸
window.scrollTo(x, y)用來捲動網頁捲軸到指定的位置


若網頁原本顯示內容的座標為 (x-coord, y-coord) ，下例會將瀏覽器的網頁內容移動捲軸到 (x-coord + x, y-coord + y) 的位置
function run() {
    window.scrollBy(30, 25);
    var s1 = document.getElementById("show1");
    s1.innerHTML = window.scrollX;
    var s2 = document.getElementById("show2");
    s2.innerHTML = window.scrollY;
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window041.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例執行 run() 後，網頁自動捲動到 (x-coord + x, y-coord + y) 的位置
window.scrollBy(30, 25);


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="window041.js" type="text/javascript"></script>
<style>
.demo {
    position: absolute;
    top: 300px;
    left: 230px;
}
</style>
</head>
<body>
<input type="button" value="RUN" onclick="run();">
<div>scrollX: <span id="show1"></span></div>
<div>scrollY: <span id="show2"></span></div>
<img class="demo" src="example.jpg" />
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window041.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟，點擊 RUN 後，網頁就會自動捲動捲軸



中英文術語對照
屬性attribute
方法method
瀏覽器broswer


您可以繼續參考
window 物件


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/window
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)