23 window.location 與 .split()

第 12 屆 iThome 鐵人賽

DAY 23

自我挑戰組

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

12th鐵人賽 javascript window.location .split()

我是圈圈

2020-09-23 10:52:22

7651 瀏覽

分享至

前言

打開 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 ，敬請期待！