访问 Github 网站时,如果多个 Window 或 Tab 同时访问 github.com,在任何一个页面做登录或登出处理,其他页面会立即提示用户已经登录或登出,需要重新加载页面。
(1)操作演示
同时2个窗口打开github.com
在其中一个窗口登录用户
另外一个窗口显示需要Reload
刷新窗口后
在一个窗口做登出处理,另外一个窗口也会提示需要Reload
(2)代码分析
浏览器右键查看源代码可以看到以下代码,其中"d-none"就是控制是否显示div的。
<div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
<svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-
2V6h2v4z"/></svg>
<span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
<span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
</div>
查看源代码可以看到页面总共引入了2个JavaScript文件:
<script crossorigin="anonymous" integrity="sha256-LrSxxxxx" src="https://assets-cdn.github.com/assets/frameworks-2ebxxxxx.js"></script>
<script async="async" crossorigin="anonymous" integrity="sha256-izZxxxxx" src="https://assets-cdn.github.com/assets/github-8b3xxxxx.js"></script>
继续查看第二JavaScript文件并搜索"js-stale-session-flash",可以找到以下代码,可见是通过监听Storage数据变更StorageEvent事件后是否存在logged-in来判断的!
window.addEventListener("storage",function(e){if(e.storageArea===localStorage&&"logged-in"===e.key&&e.newValue!==a){a=e.newValue;var n=document.querySelector(".js-stale-session-flash");r["default"](n instanceof HTMLElement,"Flash element must exist and be an HTMLElement"),n.classList.toggle("is-signed-in","true"===a),n.classList.toggle("is-signed-out","false"===a),n.classList.remove("d-none"),
继续在第二JavaScript文件里搜索"logged-in",可以看到以下代码,可见根据head里<meta name="user-login" content="">的content的值来判断的,有值时为true。有值的情况下是:
<meta name="user-login" content="rensanning">
!function(){var e=document.querySelector("meta[name=user-login]");if(e instanceof HTMLMetaElement){var n=e.content,a=String(!!n.length);try{localStorage.setItem("logged-in",a)}catch(i){return}
总结一下:监听LocalStorage的StorageEvent事件!
StackOverflow上也有相关的问题:
https://stackoverflow.com/questions/39550656/how-does-github-detect-signing-in-out
- 大小: 143.3 KB
- 大小: 150.2 KB
- 大小: 180.7 KB
- 大小: 161.4 KB
- 大小: 177.2 KB
- 大小: 117.8 KB
- 大小: 111.9 KB
- 大小: 108.2 KB
分享到:
相关推荐
github.com/go-sql-driver/mysql,go语言连接数据库的驱动
红外弱小目标数据集(https://github.com/wanghuanphd/MDvsFA_cGAN.git) 删除了部分损坏的图像
redis设计与实现学习笔记,转自github:https://github.com/JiangRRRen/Redis-stud
于2023年2月21日上传; MapBox语言插件,原地址:https://github.com/mapbox/mapbox-g
解决登录程序偶尔崩溃,修复轮播图片和页面控制器叠加等问题,修复新浪授权登录 (2016.9.7) 解决程序运行中偶尔崩溃问题,解决连续下拉刷新崩溃问题,优化代码 (2016.9.8) 优化直播页面,减少不必要的性能...
git-for-windows.github.io, 用于 Windows的upcoming版本 2.x的网站 Windows 主页的Githttp://git-for-windows.github.io/开发git clone https://github.com/git-for-windows/git-for-windows.gi
Python_EasyGui图像化 Github链接https://github.com/robertlugg/easygui
Restormer源代码,github链接:https://github.com/swz30/Restormer
【https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/1513】 我认为这与损坏的安装有关。就我而言,我在“\models\Codeformer”上的 Codeformer.pth 已损坏。替换为手动安装的...
QT Excel处理开源项目,github地址:https://github.com/QtExcel/QXlsx
系统环境:CentOS Linux release 7.6.1810 (Core) 起因:npm构建时报错 ... fatal: unable to access 'https://github.com/nhn/raphael.git/': Failed connect to github.com:443; Connection timed out npm
修复错误:Windows 操作系统无法将依赖项导出到供应商目录。 修复镜像导出子包到供应商目录错误。 错误 1 修复错误:Windows 操作系统无法将依赖项导出到供应商目录。 因为获取包后的 Windows 文件系统权限将无法...
18个 ios 项目源代码 各种布局 控件使用 及扩展视图 自定义UITableViewCell。实现各种样式的表格输入界面、自定义Tab Bar的文字、颜色和图片加箭头、列表个性化列表项、IOS欢迎界面等。
源地址:https://github.com/HerMajestyDrMona/Windows11DragAndDropToTaskbarFix 小工具是在GitHub上开源的,不用担心病毒。 它只是简单的模仿了键盘指令,在你拖拽文件停留在打开的软件上时,把窗口给打开。
Genders是用于集群配置管理的静态集群配置数据库。 它描述了群集的布局和配置,以便工具和脚本可以感知群集节点的变化。 该项目已移至Github:https://github.com/chaos/genders
Genders 是一个静态的集群配置数据库,用于集群配置管理。 它描述了集群的布局和配置,以便工具和脚本可以感知集群节点的变化。 此项目已移至 Github:https://github.com/chaos/genders
mybatis开发所需jar包,里面包含了mybatis和spring整合所需的jar包
a1017313920.github.io
https://hiszm.github.io/gallery/index.html https://hiszm.github.io/gallery/add.html https://hiszm.github.io/gallery/login.html https://hiszm.github.io/gallery/detail.html ...
碰撞检测开源工具箱 潘佳 FCL