作者leondemon (狗狗)
看板Web_Design
標題[問題] 如何攔截href的開啟網頁訊息
時間Fri Sep 30 23:06:11 2016
目前的是希望一個 <a href> 在開啟網頁的時候，不是直接整個跳轉網頁
而是在頁面某個 iframe 中開啟它。目前找到的解決方法是：
```
/*某iframe tag*/
<iframe name='this_iframe'></iframe>
/*某a tag*/
<a href='
https://....' target='this_iframe'></a>
```
利用 <iframe name> 和 <a href target> 可以將連結指定到 iframe 中開啟
但是目前希望用 JS 攔截這個開啟連結的請求，
然後做一些判定、修改一些 element 後，再決定是否由 iframe 開啟。
jQuery 好像可以做到這點，但是我希望用 vanilla JS 完成這件事情，
因為不希望包一個 library 在 browser extension 內...
但是不太確定這邊要如何攔截這個 http request 請求，得到 URL，
然後在 callback 中做一些事情，最後決定是否要開啟，或是指定 iframe 開啟
```
document.getElementById(href_id).addEventListener('click', (...a) => {
console.log('click', ...a);
return false;
});
```
以上雖然可以攔截點擊的事件，但是拿不到 URL，而且回傳 false 也無法阻止開啟網頁
最後也不知道如何指定 iframe 載入一個 URL...
另外一個問題，如果我已經會 RxJS 了 (我是由別的開發平台轉過來，FRP 寫兩年了)
那我如果要開發網頁，還有需要學 jQuery/Ajax/Promise 嗎？
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.120.104.45
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1475247973.A.6F2.html
1F：推 Hevak: eventlistener那個click後面的callback吃的第一個參數是eve 10/01 00:34
2F：→ Hevak: nt物件，直接用e.target就拿得到被點擊的element，而a elem 10/01 00:35
3F：→ Hevak: ent的href可以直接用那個element的.href存取，所以你直接在 10/01 00:35
4F：→ Hevak: callback裡面用e.target.href就取得到被點擊的元素的href值 10/01 00:35
Cool! 想說 callback 拿到的是 MouseEvent，在console.log 出來只有點擊座標
不知道可以用 target 拿到 elem 和 href
不過這個 callback 有辦法阻止原本的開啟網頁嗎？目前找不到方法阻止網頁跳轉
※ 編輯: leondemon (123.120.104.45), 10/01/2016 00:40:36
5F：推 Hevak: e.preventDefault(); 10/01 00:58
6F：→ Hevak: 這個可以阻止事件的預設行為例如a跳轉到href之類的 10/01 00:58
7F：→ Hevak: 很常看到第callback (e) => 裡面第1行就在寫e.preventDefau 10/01 00:59
8F：→ Hevak: lt();的XD 10/01 00:59
成功了！原來如此！代碼如下：
```
document.getElementById(href_id).addEventListener('click', (event) => {
event.preventDefault();
const iframe_elem = document.getElementById(iframe_id);
iframe_elem.src = event.target.href;
});
```
9F：→ Hevak: Rx如果我理解沒錯的話跟你所說的那些東西其實都不衝突@@... 10/01 01:00
不衝突是沒錯，但是看了一下好像功能 RxJS 都有了，
港覺可以不用學jQuery/Ajax/Promise
倒是應該考慮找一本 vanilla JS 的 cookbook 來學常用的作法...(有推薦的嗎)
※ 編輯: leondemon (123.120.104.45), 10/01/2016 01:08:35