在BOSS直聘发现了一个前端小秘密

故事的由来

开头&＃xff1a;小姐姐

HR小姐姐看简历比较累&＃xff0c;需要一直手动点击下一个按钮&＃xff0c;才能前往下一个简历

一位同事 - 后端架构师小哥哥想给HR做一个自动查看下一个简历的工具&＃xff0c;又不想做得复杂&＃xff0c;不想做成浏览器插件这种&＃xff0c;于是手写JS代码&＃xff0c;想在浏览器中的console控制台写代码就自动执行&＃xff0c;实现打开简历后若干秒自动查看下一个简历的功能

问题来了

当同事小哥哥在控制台写在JS代码时候&＃xff0c;用document.querySelector这个API一直获取不到DOM节点&＃xff0c;我当时觉得他写的选择器不对劲&＃xff0c;于是要他简化了下选择器,发现还是获取不到DOM节点

当时我在想&＃xff0c;嗯&＃xff1f;怎么就翻车了

于是亲自上场&＃xff0c;发现通过document.querySelector这个API始终获取不到对应的按钮DOM节点&＃xff0c;于是乎&＃xff0c;我想到我们的SASS系统&＃xff0c;里面存在iframe页面跟qiankun微前端架构&＃xff0c;我在想这个BOSS直聘是不是也存在这种情况&＃xff1f;

分析问题

boss直聘 妥妥的C端网站&＃xff0c;需要SEO优化不可置疑

但是大型的项目&＃xff0c;肯定不是单技术栈。应该是复杂的技术栈体系结合而来&＃xff0c;所以一个大的网站可能是MPA&＃43;SPA的混合体

例如我们可以看到上面的首页&＃xff0c;他就是一个MPA应用&＃xff0c;以及下面的这个页面&＃xff0c;他们都需要SEO&＃xff0c;就是搜索引擎优化&＃xff0c;需要被搜索到

延伸&＃xff1a;MPA和SPA

首先这里说明&＃xff1a;SPA不是按摩&＃xff0c;而是单页面应用&＃xff0c;像目前的单页面和多页面应用区别如下&＃xff1a;

两者的对比&＃xff1a;

图片来自于&＃xff1a;https://www.jianshu.com/p/a02eb15d2d70

在我看来两者都有各自的好处&＃xff0c;只是单页面框架目前的生态更丰富&＃xff0c;开发效率更高了。不过多页面&＃43;JQUERY也是还有很多项目在使用

破案

进入简历的列表&＃xff0c;发现BOSS直聘的简历列表页面&＃xff0c;用的是iframe指向了一个/vue/xxx的链接&＃xff0c;说明是一个MPA的项目壳子 套了一个iframe链接地址

我想可能boss直聘想接入新的技术栈vue&＃xff0c;但是用的iframe模式&＃xff0c;没有使用qiankun这种基座模式做微前端吧

我们在父级项目中直接去获取iframe中的元素节点是不可以的&＃xff0c;需要做以下处理&＃xff1a;

const iframe &＃61; document.getElementsByTagName(&＃39;iframe&＃39;)[0];
const ifr_document &＃61; iframe.contentWindow.document;//iframe中的文档内容


那么ifr_document就是可以用于获取dom节点的文档对象

这个时候要想帮助小姐姐实现AI&＃43;HR的功能&＃xff0c;例如每隔5s自动往下翻页

只要写一个定时器,获取到对应dom节点&＃xff0c;每隔对应时间就触发一下click方法即可

const but &＃61; ifr_document.querySelect(&＃39;button&＃39;);
setInterval(()&＃61;>{
but.click();
},5000)

当然这里想做得更好一点&＃xff0c;可以设置鼠标点击或者移动时就关闭定时器&＃xff0c;点击按钮再次触发自动翻页。不过貌似他没给小姐姐做&＃xff0c;估计有BUG

拓展

其实这个功能的核心出发点是通过代码去改造已有的网站项目&＃xff0c;一般情况下建议写一个浏览器拓展插件,这种需求我们日常也会用得上

插件能做哪些事&＃xff1f;

书签控制&＃xff1b;
下载控制&＃xff1b;
窗口控制&＃xff1b;
标签控制&＃xff1b;
网络请求控制&＃xff0c;
各类事件监听&＃xff1b;
自定义原生菜单&＃xff1b;
完善的通信机制&＃xff1b;


有兴趣的朋友可以看看这篇文章&＃xff0c;十分钟入门谷歌浏览器插件开发&＃xff1a;https://juejin.cn/post/6904797929056239630

例如这个插件&＃xff0c;能屏蔽youtube的广告&＃xff1a;

这种插件的实用性是不是非常强呢&＃xff1f;我觉得只要是能提升日常的工作效率&＃xff0c;舒适度的插件&＃xff0c;都是可以考虑去做的。

故事的结尾

怎么样&＃xff1f;一个日常工作中的小小沟通&＃xff0c;分享出来也能让大家学到很多知识&＃xff0c;这些东西在日内的工作中大家也都会遇到。如果感觉写得不错&＃xff0c;把React公众号点个关注&＃xff0c;分享一波&＃xff0c;来个在看/赞三连吧&＃xff01;

另外对身边的HR小姐姐要好一点哦~&＃xff01;