前端内嵌iframe网页单点登录的三种方式

背景:我们开发中会遇到让内嵌的iframe进行登录,但是有希望是单点登录,不想多次登录

目录

方法一:共享sessionStorage或localStorage

方法二:设置内嵌iframe的url参数

方法三:通过父子页面通信postMessage


方法一:共享sessionStorage或localStorage

         父页面(主站)和iframe(子站点)之间如果是同一域名或满足同源策略,可以直接共享sessionStorage或localStorage中的登录信息

        对于同源的父页面和内嵌的子页面来说,它们会共享同一个sessionStorage和localStorage,而不是各自有独立的sessionStorage和localStorage。这意味着当父页面设置数据到sessionStorage和localStorage时,子页面可以读取和访问这些数据,并且当子页面设置数据到sessionStorage和localStorage时,父页面也可以读取和访问这些数据。因此,它们共享同一个sessionStorage和localStorage空间,可以实现数据共享和交互。

方法二:设置内嵌iframe的url参数

        在设置内嵌iframe的url时候,给他必要的登录信息,这个需要跟内嵌另一个网页项目的约定好,我们传给他什么他们才可以登录。

方法三:通过父子页面通信postMessage

iframe父子页面通信_iframe父子页面国际化通信-CSDN博客

扩展:同源网页

如果网页在同源的情况下,子页面可以直接通过window.parent来拿到父页面window对象,想怎么玩都行,反之父页面也可以用下面来拿到子页面window对象


const iframe = document.getElementById('myIframe');
iframe.contentWindow

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/10468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

共赴科技盛会“2024南京智博会”11月在南京国际博览中心召开

2024年,南京这座历史悠久的文化名城迎来了一场科技与智慧交织的盛会——南京智博会|南京国际智慧城市、物联网、大数据。本次博览会以智慧城市、人工智能、消费电子、物联网、大数据为主题,汇聚了全球各地的智能科技精英,共同探讨智慧城市建设…

46 udp网络程序

查询网络服务的命令 netstat -nlup n: 显示数字 a:显示所有 u:udp服务 p:显示pid Recv-Q收到的数量,本地ip和远端ip,00表示可以收到任何地址 网络聊天 服务端 定义一个server类,成员保存ip地址&#xff…

龟兔赛跑(基于GUI与多线程实现)

直击龟兔赛跑现场 下面这张图是我们设计龟兔赛跑界面的初始效果与基本组成结构: 接下来是我仅代表我个人提出的一些疑问与解答: 1、俩动物以图片的形式显示? 其实在这里两个动物类就像标签一样 标签组件是什么?用于短文本字符串…

从loss角度理解LLM涌现能力

如今的很多研究都表明小模型也能出现涌现能力,本文的作者团队通过大量实验发现模型的涌现能力与模型大小、训练计算量无关,只与预训练loss相关。 作者团队惊奇地发现,不管任何下游任务,不管模型大小,模型出现涌现能力…

云贝教育 |【直播课】5月19日Oracle 19c OCM认证大师课 即将上课了!(附课件预览)

贝教育独家认证课OCM全网价格最低,性价比最高!!! Oracle 19c OCM认证大师培训 - 课程体系 - 云贝教育 (yunbee.net) OCM部分课件预览 Oracle Database 19c Certified Master Exam (OCM) 认证大师 25 天 / 150课时 什么是Oracle 1…

0X JavaSE-- UML、

# Unified Modeling Language UML 统一建模语言 UML 是一种图形化的语言。 UML 不是专门为 Java 准备的。 只要是面向对象的编程语言,开发前的设计,都需要画 UML 图进行系统设计。 最常用的四个 UML 图是 类图(Class Diagram)&…

启明云端ESP32 C3 模组WT32C3通过 MQTT 连接 AWS

ESP32-C3因为其性价比高,价格便宜性能又好一直是量产的首选芯片,随着量产项目扩大,对接云服务器的情况也增加了,接下来小启给大家分享下启明云端ESP32-C3模组——WT32C3系列模组/开发板连接AWS亚马逊云方法。 WT32C3系列模组 WT3…

笨方法自学python(一)

我觉得python和c语言有很多相似之处,如果有c语言基础的话学习python也不是很难。这一系列主要是学习例题来学习python;我用的python版本是3.12 代码编辑器我用的是notepad,运行py程序用cmd 现在开始写第一个程序: print ("…

ViLT 浅析

ViLT 浅析 论文链接:ViLT 文章目录 ViLT 浅析创新点网络结构总结 创新点 本文先分析了4种不同类型的Vision-and-Language Pretraining(VLP) 其中每个矩形的高表示相对计算量大小,VE、TE和MI分别是visual embedding、text embedding和modality interact…

Excel 根据分类及组内序号进行编码

例题描述和简单分析 Excel 记录课程数据,未排序,部分如下: ABC1CourseDateTime2Word1-Sep-209:003Word1-Sep-209:004PowerPoint1-Sep-209:005Word1-Sep-2012:006PowerPoint1-Sep-2012:007Excel1-Sep-2012:008Word1-Sep-2012:00 现在要新增…

【CAD建模号】学习笔记(四):工作平面

工作平面介绍 CAD建模号右侧导航栏提供了很多便捷的工具,有测量工具、坐标系、模型和图层切换、视图切换等。 1. 测量工具组 测量工具可以测量图形的几何体积,长度,角度等。工具组包含如下: 测量几何:可以测量图形的面…

笨方法自学python(二)-注释

注释和#号 程序里的注释是很重要的。它们可以用自然语言告诉你某段代码的功能是什么。在你想要临时移除一段代码时,你还可以用注解的方式将这段代码临时禁用。 # A comment, this is so you can read your program later. # Anything after the # is ignored by py…

【Python】IPython 魔法命令使用指南

依然记得从你口中 说出再见坚决如铁 昏暗中有种烈日灼身的错觉 黄昏的地平线 划出一句离别 爱情进入永夜 依然记得从你眼中 滑落的泪伤心欲绝 混乱中有种热泪烧伤的错觉 黄昏的地平线 割断幸福喜悦 相爱已经幻灭 🎵 周传雄《黄昏》 %run - 运行…

面向对象的三大特性:封装、继承、多态

一、封装 封装是面向对象的核心思想。是以类为载体,将对象的属性和行为封装起来,对外隐藏其实现细节。 封装保证了类内部数据结构的完整性,使得外部(使用该类的用户)不能轻易地直接操作此数据结构,只能执…

考了PMP后,NPDP到底还有没有必要考?NPDP通关宝典来啦!

NPDP和PMP相比,两者的相同点都是由美国发起的,都是管理行业的证书。区别也很大,PMP是项目经理国际认证证书,NPDP是产品经理认证证书,不过PMP已经由外专局引入国内二十多年了,在市面上知名度更高&#xff0c…

svg 元素 getBoundingClientRect() 数值为 0

问题 在页面在刷新时,想要立即获取页面中 svg 元素的宽高,做进一步的计算。发现通过 getBoundingClientRect 获取会有一定几率获取值为 0。 解决方案 监听 svg 元素的 load 事件,在回调中再获取。 svgElem.addEventListener("load&…

Vite创建Vue3项目识别 ../ 与 @/ 引入路径

在使用vite脚手架生成项目时,会出现一些引入路径失败的错误 例子:router中用 component引入路径时 引入 ../ 路径失败 找不到模块“../views/login/index.vue”或其相应的类型声明 {path: "/login",name: "login",component: () > import("../v…

鸿蒙开发接口Ability框架:【(窗口扩展能力)】

窗口扩展能力 WindowExtensionAbility基于ExtensionAbility,WindowExtensionAbility中展示的内容作为一个控件(AbilityComponent)内容展示在其他应用窗口中,实现在一个窗口中展示多个应用程序内容的功能。 说明: 本模块首批接口从API versio…

互斥锁和自旋锁的实现机制

本文介绍互斥锁和自旋锁的实现原理和工作过程 一、互斥锁 1.内存标记——线程id 互斥锁会记录下访问锁的线程的id,用于进行线程切换、组织阻塞队列等操作 2.阻塞队列 当多个线程试图获取同一把互斥锁,没有获取的锁的线程会被组织到阻塞队列中&#…

Keysight 是德 N1077B 光/电时钟恢复设备,收藏保存

Keysight N1077B是一款光/电时钟恢复设备,支持115 MBd至24 GBd的数据速率范围,适用于多模和单模光信号以及电信号。该设备能够处理PAM4和NRZ两种类型的数据信号,并提供符合标准的时钟恢复功能。 N1077B具备可调峰值和环路带宽(高…