• 前端父子页面传递消息


    业务背景:

    父页面在浏览器上开一个子页面去打开一个文档,在子页面中有删除该文档的操作。要求删除该文档后关闭当前页面并且刷新当前父页面,重新获取数据(去掉删除的文件)

    实现步骤:

    1、子页面删除当前文档后,刷新父页面,然后等待1s关闭自己(子页面),等待1s是为了给父页面反应时间的。

                            window.opener.location.reload();
                            setTimeout(() => {
                                window.location.href = 'about:blank'
                                window.close()                            
                            }, 1000);

    2、父页面在打开子页面时,需要保持一些资源。我这里是放在vuex中。然后在重新生成的created中从vuex中判断一个变量是否需要从vuex中获取该类数据。

     

    3、因为页面刷新会导致vuex中的数据丢失,所以需要在app.vue页面的created时把vuex中数据保持到 sessionStorage 中去。

    main.js

    // 界面刷新前,将store里面的数据暂存在localStorage里面
    window.addEventListener('beforeunload', () => {
        JSON.stringify(this.$store.state))
    })

    app.vue 中 created

          if (window.sessionStorage.getItem("store")){
              this.$store.replaceState(Object.assign({},this.$store.state, JSON.parse(window.sessionStorage.getItem("store"))))
          }

    具体业务场景就不写了

  • 相关阅读:
    css3阴影 box-shadow
    border-radius给元素加圆角边框
    企鹅邮箱开放平台
    点击按钮回到顶部
    5.2 Array类型
    js面试题知识点全解(一闭包)
    js面试题知识点全解(一作用域)
    js面试题知识点全解(一原型和原型链)
    js面试题知识点全解(一变量类型和计算)
    webpack入门篇--1.简单介绍
  • 原文地址:https://www.cnblogs.com/wanghao-boke/p/14544479.html
Copyright © 2020-2023  润新知