作者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/cn.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