故事的由來
開頭：小姐姐
HR小姐姐看簡歷比較累，需要一直手動點擊下一個按鈕，才能前往下一個簡歷
一位同事 - 后端架構師小哥哥想給HR做一個自動查看下一個簡歷的工具，又不想做得復雜，不想做成瀏覽器插件這種，于是手寫JS代碼，想在瀏覽器中的console控制臺寫代碼就自動執行，實作打開簡歷后若干秒自動查看下一個簡歷的功能
問題來了
當同事小哥哥在控制臺寫在JS代碼時候，用document.querySelect這個API一直獲取不到DOM節點，我當時覺得他寫的選擇器不對勁，于是要他簡化了下選擇器,發現還是獲取不到DOM節點
當時我在想，嗯？怎么就翻車了
于是親自上場，發現通過document.querySelect這個API始侄訓取不到對應的按鈕DOM節點，于是乎，我想到我們的SASS系統，里面存在iframe頁面跟qiankun微前端架構，我在想這個BOSS直聘是不是也存在這種情況？
分析問題
boss直聘 妥妥的C端網站，需要SEO優化不可置疑
但是大型的專案，肯定不是單技術堆疊，應該是復雜的技術堆疊體系結合而來，所以一個大的網站可能是MPA+SPA的混合體
例如我們可以看到上面的首頁，他就是一個MPA應用，以及下面的這個頁面，他們都需要SEO，就是搜索引擎優化，需要被搜索到
延伸：MPA和SPA
首先這里說明：SPA不是按摩，而是單頁面應用，像目前的單頁面和多頁面應用區別如下：
兩者的對比：
圖片來自于：https://www.jianshu.com/p/a02eb15d2d70
在我看來兩者都有各自的好處，只是單頁面框架目前的生態更豐富，開發效率更高了，不過多頁面+JQUERY也是還有很多專案在使用
破案
進入簡歷的串列，發現BOSS直聘的簡歷串列頁面，用的是iframe指向了一個/vue/xxx的鏈接，說明是一個MPA的專案殼子 套了一個iframe鏈接地址
推薦拓展閱讀：《微前端》系列文章，手機端點開 前端巔峰公眾號，首頁點擊或搜索關鍵字 微前端
我想可能boss直聘想接入新的技術堆疊vue，但是用的iframe模式，沒有使用qiankun這種基座模式做微前端吧
我們在父級專案中直接去獲取iframe中的元素節點是不可以的，需要做以下處理：
const iframe = document.getElementsByTagName('iframe')[0];
const ifr_document = iframe.contentWindow.document;//iframe中的檔案內容
那么ifr_document就是可以用于獲取dom節點的檔案物件
這個時候要想幫助小姐姐實作AI+HR的功能，例如每隔5s自動往下翻頁
只要寫一個定時器,獲取到對應dom節點，每隔對應時間就觸發一下click方法即可
const but = ifr_document.querySelect('button');
setInterval(()=>{
but.click();
},5000)
當然這里想做得更好一點，可以設定滑鼠點擊或者移動時就關閉定時器，點擊按鈕再次觸發自動翻頁，不過貌似他沒給小姐姐做，估計有BUG
拓展
其實這個功能的核心出發點是通過代碼去改造已有的網站專案，一般情況下建議寫一個瀏覽器拓展插件,這種需求我們日常也會用得上
插件能做哪些事？
書簽控制；
下載控制；
視窗控制；
標簽控制；
網路請求控制，
各類事件監聽；
自定義原生選單；
完善的通信機制；
有興趣的朋友可以看看這篇文章，十分鐘入門谷歌瀏覽器插件開發：https://juejin.cn/post/6904797929056239630
例如這個插件，能屏蔽youtube的廣告：
這種插件的實用性是不是非常強呢？我覺得只要是能提升日常的作業效率，舒適度的插件，都是可以考慮去做的，
故事的結尾
怎么樣？一個日常作業中的小小溝通，分享出來也能讓大家學到很多知識，這些東西在日內的作業中大家也都會遇到，如果感覺寫得不錯，把前端巔峰公眾號點個關注，分享一波，來個在看/贊三連吧！
另外對身邊的HR小姐姐要好一點哦~！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/300264.html
標籤：其他