前端内嵌iframe网页单点登录的三种方式
_揽 2024-06-11 08:03:03 阅读 53
背景:我们开发中会遇到让内嵌的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
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。