首頁 > 文章 > web前端 > 關於JS中window的屬性與方法的使用方法

關於JS中window的屬性與方法的使用方法

不言原創: 2018-07-16 17:25:072317瀏覽

這篇文章主要介紹了關於JS中window屬性和方法的解析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

物件在撰寫時可不使用window這個前綴

setInterval() – 間隔指定的毫秒數不停地執行指定的程式碼。

clearInterval() – 用於停止 setInterval() 方法執行的函式程式碼。

setTimeout() - 暫停指定的毫秒數後執行指定的程式碼

clearTimeout() - 用於停止執行setTimeout()方法的函數代碼

例：

使用計時器在頁面顯示時鐘
•時間格式為：xxxx年xx月xx日xx:xx:xx 到秒
•每秒刷新一次

1 <body>
2     <button onclick="open1()">打开新页面</button>
3     <button onclick="start1()">开始显示时间</button>
4     <button onclick="stop1()">停止时间</button>
5 </body>

<script type="text/javascript">
            function open1(){
                window.open("new_file.html","newFile","menubar=no,location=no,toolbar=no,resize=no,width=500,height=500,top=200,left=400")
            }
            
            function time1(){
            var date = new Date();
            var y = date.getFullYear();
            var mo = date.getMonth();
            var d = date.getDate();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            console.log("%d年%d月%d日 %d:%d:%d" ,y , mo , d , h , m , s );                
            }
            var inter = null ;
            
            function start1(){
                if(inter != null){
                    stop1();
                }
                inter = setInterval(time1,1000);
            }
            
            function stop1(){
                clearInterval(inter);
                inter = null;
            }
            
            
        </script>

close( ) - 關閉目前視窗

open() - 開啟新窗口，並傳回新視窗的物件

語法window.open(URL,name,features,replace);

#URL：可選字串，宣告了新視窗的URL。如果省略這個參數或值為空字串，則新視窗不顯示任何文件

name：可選字串，是一個由逗號分割的特徵列表，它聲明了新視窗名稱。如果此參數指定已存在窗口，則open方法會傳回指定視窗的　　　　參考（不再建立新視窗）。這時，features將被忽略。

features：可選字串，宣告了新視窗顯示的標準瀏覽器特徵，如果省略，則新視窗具有所有標準特徵。

replace：一個可選的布林值。規定了裝載到視窗的 URL 是在視窗的瀏覽記錄中建立新條目，還是取代瀏覽歷史記錄中的目前條目。支援下面的值：•true - URL 取代瀏覽歷史中的目前條目。 •false - URL 在瀏覽歷史記錄中建立新的條目。

其中open() 方法的第三個參數如下表

#channelmode=yes\|no\|1\|0	是否使用劇院模式顯示視窗。預設為 no。	resizable=yes\|no\|1\|0	視窗是否可調整尺寸。預設是 yes。
directories=yes\|no\|1\|0	是否新增目錄按鈕。預設為 yes。	scrollbars=yes\|no\|1\|0	#是否顯示捲軸。預設是 yes。
fullscreen=yes\|no\|1\|0	#是否使用全螢幕模式顯示瀏覽器。預設是 no。處於全螢幕模式的視窗必須同時處於劇院模式。	status=yes\|no\|1\|0	#是否新增狀態列。預設是 yes。
height=pixels	#視窗文件顯示區的高度。以像素計。	titlebar=yes\|no\|1\|0	#是否顯示標題列。預設是 yes。
left=pixels	#視窗的 x 座標。以像素計。	toolbar=yes\|no\|1\|0	#是否顯示瀏覽器的工具列。預設是 yes。
location=yes\|no\|1\|0	#是否顯示位址欄位。預設是 yes。	top=pixels	視窗的 y 座標。
menubar=yes\|no\|1\|0	#是否顯示功能表列。預設是 yes。	width=pixels	視窗的文件顯示區的寬度。以像素計。

Location物件屬性

#hash	##設定或返回從井號(#) 開始的URL（錨）。
host	設定或傳回主機名稱和目前 URL 的連接埠號碼。
hostname	#設定或傳回目前 URL 的主機名稱。
href	#設定或傳回完整的 URL。
pathname	#設定或傳回目前 URL 的路徑部分。
port	設定或傳回目前 URL 的連接埠號碼。
protocol	#設定或傳回目前 URL 的協定。
search	#設定或傳回從問號 (?) 開始的 URL（查詢部分）。

以下為範例

<script type="text/javascript">
var hash = location.hash;// top
var host = location.host;// www.baidu.com:8020
var hostname = location.hostname;// www.baidu.com
var port = location.port;// 8020;
var pathname = location.pathname;// index.html
var protocol = location.protocol; // http
console.log(location);
console.log(hash);
console.log(host);
console.log(hostname);
console.log(port);
console.log(pathname);
console.log(protocol);
</script>

Location 物件方法

assign()　　載入新的文件。

reload()　　重新載入目前文檔，相當於重新整理頁面。

replace()　　以新的文件取代目前文件。

（location.replace("location.html#top?a=10&b=20");相當於location.href = "location.html#top?a=10&b=20";）

關於JS中window的屬性與方法的使用方法

相關文章