当前位置： 首页 > news >正文

【知识碎片】第三方登录弹窗效果

news 来源：原创 2024/4/19 1:16:44

需求
点击第三方登录-->打开新tab并控制tab大小-->新tab登录完成自动关闭-->通知旧tab刷新

难点一 如何通过js新建tab

<a class="3rdLogin" href="/a/b/c">click to login</a>
$(".3rdLogin").click(function(e) {
    e.preventDefault(),
    window.open($(this).attr("href"), "_blank", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=500")
})

如果直接用window.open()，在chrome默认会阻止弹窗

难点二 如何关闭tab

window.opener = null;
window.open('', '_self');
window.close();

难点三 如何跨tab通信

html5 postMessage解决跨域、跨窗口消息传递
跨页面(tab/window)通信的几种方法

相关文章：

  • VMware虚拟机中为Linux 添加虚拟硬盘（VirtualBox方法类似）
  • Robot Framwork 问题小记
  • 给MySQL增加一个表示例
  • 复变函数：复函数的空间与Montel定理
  • sed使用命令记录
  • db2模式
  • 配置企业库5.0管理
  • SuperMicro（超微）IPMI安装操作系统KVM教程-超微3U8刀服务器
  • Python cookbook笔记——求N个最大最小元素及lambda表达式
  • restful 学习地址
  • Flutter 开发一个 GitHub 客户端 | 掘金技术征文
  • brk/sbrk的使用
  • 我们要和你完成一件大事
  • Eclipse中文乱码问题
  • Vue 动态创建 component
  • [Vue CLI 3] 配置解析之 css.extract
  • [数据结构]链表的实现在PHP中
  • 【391天】每日项目总结系列128（2018.03.03）
  • 【刷算法】从上往下打印二叉树
  • 2019年如何成为全栈工程师？
  • css系列之关于字体的事
  • extjs4学习之配置
  • JavaScript设计模式与开发实践系列之策略模式
  • laravel 用artisan创建自己的模板
  • React组件设计模式（一）
  • 前端临床手札——文件上传
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 小程序 setData 学问多
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践，瞭望未来城市源起 ...
  • 格斗健身潮牌24KiCK获近千万Pre-A轮融资，用户留存高达9个月 ...
  • 好程序员大数据教程Hadoop全分布安装（非HA)
  • ​ 无限可能性的探索：Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​直流电和交流电有什么区别为什么这个时候又要变成直流电呢？交流转换到直流（整流器）直流变交流（逆变器）​
  • # Pytorch 中可以直接调用的Loss Functions总结：
  • $.proxy和$.extend
  • （0）Nginx 功能特性
  • （Arcgis）Python编程批量将HDF5文件转换为TIFF格式并应用地理转换和投影信息
  • （C）一些题4
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节（封闭类和Final方法）
  • （Redis使用系列） Springboot 实现Redis消息的订阅与分布 四
  • （分类）KNN算法- 参数调优
  • （附源码）python旅游推荐系统 毕业设计 250623
  • (译) 函数式 JS #1：简介
  • （转载）PyTorch代码规范最佳实践和样式指南
  • ./configure,make,make install的作用
  • .Mobi域名介绍
  • .NET / MSBuild 扩展编译时什么时候用 BeforeTargets / AfterTargets 什么时候用 DependsOnTargets？
  • .Net Memory Profiler的使用举例
  • .NET Project Open Day(2011.11.13)
  • /usr/bin/env: node: No such file or directory
  • :not(:first-child)和:not(:last-child)的用法
  • @Data注解的作用
  • @EventListener注解使用说明
  • [ Linux 长征路第二篇] 基本指令head,tail,date,cal,find,grep,zip,tar,bc,unname
  • []FET-430SIM508 研究日志 11.3.31