提姆寫程式

0%

JSP 筆記 - window.location 的應用

發表於 分類於 Disqus：
location 實際應用

location

location 的基本認識可以知道一些方法，下方筆記這次特訓的案例。

使用 JavaScript 語法，操控點擊後，能夠轉址到對應網站

有兩個按鈕，分別帶入兩個不同的網址，並用 location.href 的方式跳至連結，這之前做旅館訂房網頁時有使用過。

HTML 架構

1
2
<button class="btn btn_google" id="btnGoogle" title="Google">Google</button>
<button class="btn btn_yahoo" id="btnYahoo" title="Yahoo">Yahoo</button>

JavaScript 行為

分別綁定兩個按鈕，並給予跳轉連結的方法，使用點擊事件完成。

1
2
3
4
5
6
7
8
9
10
11
12
let btnGoogle = document.querySelector("#btnGoogle");
let btnYahoo = document.querySelector("#btnYahoo");

function googleLink() {
  location.href = "https://www.google.com.tw/";
}

function yahooLink() {
  location.href = "https://tw.yahoo.com/";
}
btnGoogle.addEventListener("click", googleLink);
btnYahoo.addEventListener("click", yahooLink);

有兩顆按鈕，是部落格推薦連結，請抓取 data-id 的值後進行轉址

data-set 的單元後續會介紹到，這邊先筆記一下用法。

限制條件如下：

  1. 點擊 Tom 時，網址為 https://www.hexschool.com/?recommend=tom
  2. 點擊 John 時，網址為 https://www.hexschool.com/?recommend=John

HTML 兩顆按鈕

1
2
3
4
5
6
<button class="google jq-google" title="Tom 推薦六角學院" data-id="tom">
  Tom 推薦六角學院
</button>
<button class="yahoo jq-yahoo" title="John 推薦六角學院" data-id="John">
  John 推薦六角學院
</button>

JavaScript 行為

這裡比較特別的是要取得屬性為 data-id。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let jqGoogle = document.querySelector(".jq-google");
let jqYahoo = document.querySelector(".jq-yahoo");

let hexSchoolUrl = "https://www.hexschool.com/";

let googleId = jqGoogle.getAttribute("data-id");
let yahooId = jqYahoo.getAttribute("data-id");

function tomLink() {
  location.href = `${hexSchoolUrl}?recommend=${googleId}`;
}
jqGoogle.addEventListener("click", tomLink);

function johnLink() {
  location.href = `${hexSchoolUrl}?recommend=${yahooId}`;
}
jqYahoo.addEventListener("click", johnLink);

延伸：如果網址規則是 https://www.hexschool.com/?recommend="值"，該如何取出 recommend 的值

按鈕方法雷同，就不再贅述。

JavaScript 取得參數

這裡使用到 pathname 取得當前網址路徑的方法，下方為取得單一與多個的寫法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let setSingleParamUrl = document.querySelector("#singleParams");
let setMultiParamUrl = document.querySelector("#multiParams");

//取得單一參數
function singleParams() {
  location.href = location.pathname + "?recommend=userName";
}
setSingleParamUrl.addEventListener("click", singleParams);

//取得多個參數
function multiParams() {
  location.href =
    location.pathname + "?recommend=userName&param2=88&param3=abc";
}
setMultiParamUrl.addEventListener("click", multiParams);