热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

故事的由来开头:小姐姐HR小姐姐看简历比较累,需要一直手动点击下一个按钮,才能前往下一个简历一位同事-后端架构师小哥哥想给HR做一个

故事的由来

开头:小姐姐

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

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

问题来了

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

当时我在想,嗯?怎么就翻车了

于是亲自上场,发现通过document.querySelector这个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的广告:

图片

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

故事的结尾

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

另外对身边的HR小姐姐要好一点哦~!


推荐阅读
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 在网站制作中随时可用的10个 HTML5 代码片段
    HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
author-avatar
东北的小爷们_366
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有