iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 23
0
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 23

23 window.location 與 .split()

前言

打開 chrome 你可以看到左上角有回到上一頁、到下一頁還有重整的箭頭。其實我們也可以用 javascript 寫出類似的功能,不論是跳轉、重整頁面,或跳到某些頁面。同時,你可能也會發現網址裡有時會藏一些 id ,要怎麼把這些資料取出呢?

今天會運用 HTML DOM 還有陣列的概念,還不熟悉的人可以回去讀一下 08 HTML DOM 、 .innerHTML 、 getElementById 、 getElementsByClassName 與 document.querySelector 及 11 物件與陣列。

window.location

語法

首先我們有三種可能使用到的範圍,本頁面位址、父頁面位址、最外層頁面的位址。用 js 寫的話是這樣:

// 1) 操作本頁面位址
window.location.href

// 2) 操作父頁面位址
parent.location.href

// 3) 操作最外層頁面的位址
top.location.href

那有什麼能玩的功能呢?除了剛剛提到的重新整理、回到上一頁、到下一頁,還可以指定他跳到某個頁面,當他按上一頁時要跳回哪個頁面,或設定重整的時候是否要跟 server 拿新資料。

// 1) 重整本頁
history.go(0); //也可寫location.reload()

// 2) 回到上一頁
history.go(-1); //也可寫history.back()

// 3) 依此類推,回到上一頁的上一頁是
history.go(-2);

// 4) 到往後一頁
history.forward();

// 5) 跳轉到某頁面
location.replace(url);

// 6)  跳轉到某頁面
location.assign(url);

// 7) 設定重讀時拿資料的方式
reload(forceGet); //括號的預設為false代表不用向server拿新資料,設為true代表一定要向server拿新資料

第五跟第六項雖然都是讓頁面可以跳到另一個頁面,但使用者跳過去後如果按上一頁,會出現的頁面卻不一樣。假設今天使用者從 A 頁面逛到 B 頁面,並在 B 頁面執行 location.replace(url); ,跳到 C 頁面,其實是把 B 頁換成 C 的意思,所以如果使用者在岸上一頁,會跳回 A 頁面。

但如果是在 B 頁面執行 location.assign(url); 就不同了,雖然一樣跳到 C ,但按上一頁的時候,卻是回到 B 頁。

應用

那麼要怎麼使用呢?很簡單,只要把要使用的範圍加上要使用的方式即可,就像在玩誰在哪做哪件事的遊戲一樣。舉幾個例子吧!

如果我要重新整理目前的頁面我可以這樣寫:

window.location.replace(window.location.href);

如果我想要跳到 google 我可以這樣寫:

window.location.replace("http://www.google.com");

如果我想要重整的是父頁面:

parent.window.history.go(0);

讓我們來想想看,要寫出下面圖片的畫面,要怎麼運用 js 和我們剛學到的技能呢?

當然 html 的部分很簡單:

<div id = "next">
  <button>上一頁</button> 
</div>
<div id = "prior">
  <button>下一頁</button>
</div>

js 的部分可以這樣寫:

let next = document.getElementById("next");
let prior = document.getElementById("prior");

next.addEventListener("click",function(){
  window.location.history.back();
});

prior.addEventListener("click",function(){
  window.location.history.forward();
});

應該不會太難吧,就是增加兩個事件監聽器在按鈕,讓他執行 window.location 的動作而已。你也可以把上一頁改成連到某網站的按鈕,試試自己會不會寫轉址的功能。

.split()

你可以把 .split 想成一把次元刀,或是 excel 裡的資料剖析,可以切割字符。語法為:

stringObject.split(以什麼切,數量)

以什麼切可以是字串、空字串,或正則表達式,至於正則表達式是什麼我們之後會提到。而數量則是切完以後要取幾個數,可以寫或不寫。同時,分割完以後的東西會變成陣列。舉例來說:

const str = "1 2 3 4 5 6 7 8 9";

let a = str.split("");//空字串,所以連空白都會列出來 
let b = str.split(" ");//以空白來切 
let c = str.split("3",2);//以3來切,只列出兩個 

console.log(a); //["1", " ", "2", " ", "3", " ", "4", " ", "5", " ", "6", " ", "7", " ", "8", " ", "9"]
console.log(b); //["1", "2", "3", "4", "5", "6", "7", "8", "9"]
console.log(c); //["1 2 ", " 4 5 6 7 8 9"]

注意,空字串和空白是不同的,從上面的 a 和 b 你應該可以看出端倪。懂上面之後,進一步來說我們當然可以應用這個技術,來取出網址中的資料。假設 url 是 https://www.hexschool.com/?recommend=Tom ,當我們想取出 recommend 後面的值 Tom ,要怎麼做呢?

記得 12 陣列補充教的 indexOf() 嗎?首先我們可以利用 indexOf 來確認問號的位置,然後用次元刀 split 把他從 ? 的位置切開,確認後面真的有值。再從 = 的位置再切一次,取出後面的值,並放到網站畫面上。

要公布答案囉。

html:

<p class="catchRecommendId"></p>

js:

let url = 'https://www.hexschool.com/?recommend=Tom'
let value = '';
//用indexOf確認問號的位置,若大於0就執行條件
console.log(url.indexOf('?')); //?在第26個位置

if (url.indexOf('?') > 0) {
  //url.split('=')[0][1] 表示以?作為斷點,左邊=[0]='https://www.hexschool.com/?recommend',右邊=[1]='Tom'
  value = url.split('=')[1];
  console.log(value);
}
//location.search.split("=")[1];

let data = document.querySelector('.catchRecommendId');
data.textContent = `recommend的值為${value}`;

希望你喜歡今天的文章!我們明天就要開始邁入最後一個大關卡: Ajax 與 axios ,敬請期待!

學習與參考資料

JS 學徒特訓班教學影片及練習題 44-46 關
JavaScript:回上一頁、各種跳轉頁面方法與 window.location 物件: https://chentsu.wordpress.com/2014/01/03/javascript%EF%BC%9A%E5%9B%9E%E4%B8%8A%E4%B8%80%E9%A0%81%E3%80%81%E5%90%84%E7%A8%AE%E8%B7%B3%E8%BD%89%E9%A0%81%E9%9D%A2%E6%96%B9%E6%B3%95%E8%88%87-window-location-%E7%89%A9%E4%BB%B6/
javascript筆記 - window.location類別: http://cat-son.blogspot.com/2012/11/javascript-windowlocation.html#sthash.UeM0Vl5j.GcSVeggG.dpbs
JavaScript split() 方法: https://www.w3school.com.cn/jsref/jsref_split.asp
JavaScript 取得網址參數(QueryString): https://www.ucamc.com/e-learning/javascript/335-javascript-%E5%8F%96%E5%BE%97%E7%B6%B2%E5%9D%80%E5%8F%83%E6%95%B8-querystring


上一篇
22 Github
下一篇
24 Ajax 、 JSON 與 axios (上)
系列文
花三十天找到 JavaScript 沙漠中的綠洲35

尚未有邦友留言

立即登入留言