[問題] 如何攔截href的開啟網頁訊息

看板Web_Design作者 (狗狗)時間7年前 (2016/09/30 23:06), 7年前編輯推噓2(207)
留言9則, 1人參與, 最新討論串1/1
目前的是希望一個 <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
eventlistener那個click後面的callback吃的第一個參數是eve
10/01 00:34, 1F

10/01 00:35, , 2F
nt物件,直接用e.target就拿得到被點擊的element,而a elem
10/01 00:35, 2F

10/01 00:35, , 3F
ent的href可以直接用那個element的.href存取,所以你直接在
10/01 00:35, 3F

10/01 00:35, , 4F
callback裡面用e.target.href就取得到被點擊的元素的href值
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
e.preventDefault();
10/01 00:58, 5F

10/01 00:58, , 6F
這個可以阻止事件的預設行為例如a跳轉到href之類的
10/01 00:58, 6F

10/01 00:59, , 7F
很常看到第callback (e) => 裡面第1行就在寫e.preventDefau
10/01 00:59, 7F

10/01 00:59, , 8F
lt();的XD
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
Rx如果我理解沒錯的話跟你所說的那些東西其實都不衝突@@...
10/01 01:00, 9F
不衝突是沒錯,但是看了一下好像功能 RxJS 都有了, 港覺可以不用學jQuery/Ajax/Promise 倒是應該考慮找一本 vanilla JS 的 cookbook 來學常用的作法...(有推薦的嗎) ※ 編輯: leondemon (123.120.104.45), 10/01/2016 01:08:35
文章代碼(AID): #1NxdzbRo (Web_Design)