admin 管理员组

文章数量: 1184232

过程拆分

  • A页面中打开B页面，A，B页面通信方式？
  • B页面正常关闭，如何通知A页面？
  • B页面意外崩溃，如何通知A页面？

A、B页面的通信方式

  • url传参
  • localStorage本地存储
  • postmessage
  • WebSocket协议
  • SharedWorker
  • Service Worker

url传参

A.vue 

<template><div><div>{
   
   {
   
    count }}</div><button @click="handleNewDialog">B弹窗</button></div></template><script setup>
  import {
   
    ref, onMounted } from "vue";
  import {
   
    useRouter } from 'vue-router'//引入useRouterconst count =ref(1);const router =useRouter();const{
   
   href}= router.resolve({
   
   //使用resolve
    name:'B',//这里是跳转页面的name
    path:'/B',
    query:{
   
   
      count: count.value,}})
  window.name ='A'
  function handleNewDialog(){
   
   
    window.open(href,'_blank',centerStyle(400,400)+',toolbar=no,menubar=no,resizeable=no,location=no,status=no,scrollbars=yes')}// 子方法
  var centerStyle =function(height, width){
   
   
    var iTop =(window.screen.height -30- height)/2;//获得窗口的垂直位置; // var iLeft = (window.screen.width - 10 - width) / 2;        //获得窗口的水平位置; 不生效
    let iLeft =(window.screenX || window.screenLeft ||0)+(window.screen.width - width)/2;return'height='+ height +',width='+ width +',top='+ iTop +',left='+ iLeft
  };
  window.addEventListener('hashchange',function(){
   
   // 监听 hash
    let hash = window.location.hash;
    let index = hash.indexOf('?');
    let searchData = hash.substring(index +1);
    let arr = searchData.split('=');
    count.value = arr[1];}, false);</script><style></style>

B.vue 

<template><div><div>{
   
   {
   
    newCount }}</div><button @click="handelAdd">增加count</button><button type="button" @click="sendA()">发送A页面消息,关闭B弹窗,newCount变更后并显示在A页面上</button></div></template><script setup>
  import {
   
    ref } from "vue";
  import {
   
    useRoute, useRouter } from 'vue-router'
  window.name ='B'
  let newCount =ref(0);const route =useRoute()
  newCount.value = route.query.count
  function handelAdd(){
   
   
    newCount.value ++}// 窗口崩溃
  window

本文标签： 如何通知 关闭 页面

版权声明：本文标题：前端通信新路径：从A到B再到A的数据循环与刷新策略 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1771583987a3546269.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。