[問題] 如何攔截href的開啟網頁訊息
目前的是希望一個 <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://www.ptt.cc/bbs/Web_Design/M.1475247973.A.6F2.html
推
10/01 00:34, , 1F
10/01 00:34, 1F
→
10/01 00:35, , 2F
10/01 00:35, 2F
→
10/01 00:35, , 3F
10/01 00:35, 3F
→
10/01 00:35, , 4F
10/01 00:35, 4F
Cool! 想說 callback 拿到的是 MouseEvent,在console.log 出來只有點擊座標
不知道可以用 target 拿到 elem 和 href
不過這個 callback 有辦法阻止原本的開啟網頁嗎?目前找不到方法阻止網頁跳轉
※ 編輯: leondemon (123.120.104.45), 10/01/2016 00:40:36
推
10/01 00:58, , 5F
10/01 00:58, 5F
→
10/01 00:58, , 6F
10/01 00:58, 6F
→
10/01 00:59, , 7F
10/01 00:59, 7F
→
10/01 00:59, , 8F
10/01 00:59, 8F
成功了!原來如此!代碼如下:
```
document.getElementById(href_id).addEventListener('click', (event) => {
event.preventDefault();
const iframe_elem = document.getElementById(iframe_id);
iframe_elem.src = event.target.href;
});
```
→
10/01 01:00, , 9F
10/01 01:00, 9F
不衝突是沒錯,但是看了一下好像功能 RxJS 都有了,
港覺可以不用學jQuery/Ajax/Promise
倒是應該考慮找一本 vanilla JS 的 cookbook 來學常用的作法...(有推薦的嗎)
※ 編輯: leondemon (123.120.104.45), 10/01/2016 01:08:35