JavaScript:回上一頁、各種跳轉頁面方法與 window.location 物件

跳轉頁面是對瀏覽器視窗操作,用到 window 物件。瀏覽器每個分頁是獨立的環境,有各自分開的 window 物件,window 也就是全域物件這是瀏覽器的一個特色,所以要獲取全域物件的屬性時,window 可寫也可不寫
例如:

window.history.go(-1);

等同於

history.go(-1);

回到上一頁的方法,有下面兩種:

1.  history.go 方法

window.history.go(-1); 

2. history.back 方法

window.history.back();

回到下一頁的則是:

1.  history.go 方法

window.history.go(1);

2. history.forward 方法

window.history.forward();

可以簡單地看出來

window.history(argument)

參數是正數就往後幾頁
參數是負數就往前幾頁
參數是 0 則重新載入現在頁面

重新載入現在的頁面有許多不同方法:

1. history.go 方法

window.history.go(0);

2. location.reload 方法

window.location.reload(true);

接收一個 boolean 參數,若是 true 會重新送出 http request, false 則從 cache 中重新載入

3. 指定 location 屬性

window.location = 'http://example.com';

4. 指定 location.href 屬性

window.location.href = 'http://example.com';

5. location.assign 方法

window.location.assign('http://example.com');

3 ~ 5 基本上效果都一樣

6. location.replace 方法

window.location.replace('http://example.com');

replace 比較特別,算是對現在的網頁直接做置換,所以 history 不會記錄到置換前的網頁,置換後用 go(-1),會回到我們所能看到的上上頁。

window location 物件除了 href (整個url) 還有許多其他屬性可以取用

– protocol
//  可以 get 或 set protocol 值,例如:’https:’
– host
// 可以 get 或 set host 值,包括 port,例如:’example.com:5068′
– hostname
// 可以 get 或 set hostname 值,不包括 port,例如:’chentsu.wordpress.com’
– port
// 可以 get 或 set port 值,例如:’80’
– pathname
// 可以 get 或 set pathname 值,例如: ‘/2014/01/03/javascript:回上一頁、各種跳轉頁面方法與-window-location-物件’
– search
// 可以 get 或 set query 值,例如: ‘?x=1&y=3&z=8’ 這樣的查詢字串
– hash
// 可以 get 或 set hash 值,例如: ‘#header’ 這樣的 anchor 標記位置

參考資料:Mozilla Developer Document – location

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s