前端内嵌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

相关推荐

  1. 前端iframe网页登录方式

    2024-05-15 16:12:05       32 阅读
  2. 初识 iframe

    2024-05-15 16:12:05       32 阅读
  3. Vue3 对于Iframe组件进行缓存

    2024-05-15 16:12:05       30 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-15 16:12:05       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-15 16:12:05       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-15 16:12:05       87 阅读
  4. Python语言-面向对象

    2024-05-15 16:12:05       96 阅读

热门阅读

  1. 32-Openwrt nand flash坏块管理nmbm功能支持

    2024-05-15 16:12:05       29 阅读
  2. 【数据结构与算法】力扣 49. 字母异位词分组

    2024-05-15 16:12:05       31 阅读
  3. 大数据面试 --- 六

    2024-05-15 16:12:05       38 阅读
  4. R语言数据分析案例分析一个关于房价的数据集

    2024-05-15 16:12:05       34 阅读
  5. 平衡车电池UL2271认证是什么?

    2024-05-15 16:12:05       29 阅读
  6. Symbol类型的作用

    2024-05-15 16:12:05       28 阅读
  7. [前端] vue2的/deep/转化为vue3语法(笔记)

    2024-05-15 16:12:05       35 阅读
  8. vue3 动态加载页面

    2024-05-15 16:12:05       35 阅读
  9. error和exception的区别?

    2024-05-15 16:12:05       36 阅读
  10. ISBN查询图书api接口

    2024-05-15 16:12:05       37 阅读
  11. 解决方案:sql里的join跟left join有什么区别

    2024-05-15 16:12:05       32 阅读
  12. 探索Git:版本控制的革命(一文了解Git)

    2024-05-15 16:12:05       36 阅读