关于iframe一些通讯的记录(可适用工作流审批)

news2024/9/28 1:21:00

一.知识点

(1).我们可以通过postMessage(发送方)和onmessage(接收方)这两个HTML5的方法, 来解决跨页面通信问题,或者通过iframe嵌套的不同页面之间的通信

a.父页面代码如下

<div v-if="src" class="iframe">
      <iframe
            ref="iframe"
            id="iframe"
            width="100%"
            height="600"
            loading="lazy"
            :src="src"
            frameborder="0"
            scrolling="no"
            marginheight="0"
            marginwidth="0"
            @load="loaded"
      ></iframe>
</div>

a1.父页面向子页面发送信息(两种方法)

第一种

const iframe = document.getElementId('iframe')//id
//第一个参数是发送的消息,无格式要求;第二个参数是域名限制,当不限制域名时填写*
// 后面的 * 号就是处理跨域问题的,任何域名都不会出现跨域问题
// 传递的参数可以是数组,对象,字符串等 
iframe.contentWindow.postMessage('你需要传的数据', "*"); //数据比如({},'*'),('123','*')
// 也可以指定传送域名地址,这个域名不会出现跨域问题,写父页面(接收)域名地址
iframe.contentWindow.postMessage("需要传递的参数", 'http://0.0.0.0:8080')

第二种

this.$refs.iframe.contentWindow.postMessage(workDetailsData.workflowList,'*')

a2.子页面接收父页面收到的信息

 * 函数防抖
 * @param fn
 * @param interval
 * @returns {Function}
 * @constructor
 */
export const Debounce = (fn, t) => {
  let delay = t || 500
  let timer
  return function () {
    let args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fn.apply(this, args)
    }, delay)
  }
}


import { Debounce } from '@/utils/public.js'
mounted() {
        window.onmessage = this.handleMesg
        // addEventListener触发多次问题
        // window.addEventListener('message', this.handleMesg)
      }
},

//防抖处理
handleMesg: Debounce(function (e) {
    //这里做接收数据的操作
    if(e){
    console.log(e.data)
}

}),

a.3子页面(iframe加载的页面)向父页面传递消息

window.parent.postMessage({string: '我是iframe里面的数据'}, "*");

a.4父页面接收子页面传递的消息

window.onmessage = function(event){
	console.log(event.data.string) //我是iframe里面的数据
}

a.5 父页面接收子页面传递的消息(第二种)

//监听单个事件
window.addEventListener('message', function (msg) {
  console.log(msg.data.string)
})

二.项目实践

1.效果图

编辑

编辑

编辑

逻辑如下

1.首先点击审批通过按钮,调用方法

<el-button
    v-if="hasApproved"
    type="primary"
    size="small"
    @click="submit('Approved')"
  >
    审批通过
</el-button>

2.方法如下

// 审批
  submit(data) {
    this.operateStatus = data //传过来的状态储存起来
    if (this.suspended) { //默认是false  请求详情接口时会根据后端返回这个字段判断他是否挂起
      this.$message.error('该任务已挂起,无法进行操作!')
      return
    }
    if (data === '撤回') {
      this.confirmSubmit()
      return
    }
    let label = data === 'Approved' ? '审批通过' : '审批拒绝'
    this.assignee_schema_model.comment =
      data === 'Approved' ? '批准' : '拒绝'
    this.dialogTitle = `确认是否${label}`
    this.msgContent = `确认${label}吗?`
    this.visible = true //打开弹窗
  },
弹窗如下

3.点击确定调用接口方法,调用接口时进行一些判断操作如下

  confirmSubmit() {
        let data = this.operateStatus
        this.isLoading = true
        if (data === 'Approved' || data == 'Rejected') {
          const params = { //审批流接口需要的参数
             variables: [
              {
                name: 'approveResult',
                value: data === 'Approved' ? 'Approved' : 'Rejected', //判断是同意还是拒绝
              },
              {
                name: 'comment',
                value: this.assignee_schema_model.comment,
              },
              {
                name: 'isWithdraw',
                value: '0',
              },
            ],
            action: 'complete',
            comment: this.assignee_schema_model.comment,
            currentTaskId: this.$route.query.id,
          }
          if (!this.assignee_schema_model.comment) { //判断是否写了批注 不能为空
            this.$message.error('请输入批注!')
            this.isLoading = false
            return
          }
            //重点 这里假如你是需要在自己的页面,比如商品详情页面,即iframe的页面自己调用自己中心的后端接口,不通过公共的审批接口时,需要进入这里,this.isPostMsg这个数据需要自己判断是否需要进入
          if (this.isPostMsg && data == 'Approved') {
            // 审批动作在iframe页面中完成
            this.$refs.iframe.contentWindow.postMessage( //向iframe 页面传递信息
              {
                status: data,
                value: this.assignee_schema_model.comment,
                params: params,
              },
              '*'
            )
            this.visible = false
            this.isLoading = false

            window.addEventListener('message', this.handleMesg) //接收iframe页面传递过来的信息
            return //不往下执行 即不调用公共审批接口
          }

          if (!this.src) { //判断配置
            console.log('审批流配置问题,formKey为空')
            this.$message.error(
              '流程配置问题,/activiti/task接口返回的formKey为空'
            )
            this.visible = false
            this.isLoading = false
            return
          }
          if (!this.isOpenIframe(this.src)) {
            //没有被审批流程的菜单权限
            this.$message.error(this.authMenuMsg)
            this.visible = false
            this.isLoading = false
            return
          }

          taskAction(params) //调用公共审批接口 (包含了同意和拒绝) 根据定义的参数判断
            .then((res) => {
              if (res.failed === true) {
                this.$message.error(res.message || '操作失败,请联系管理员')
                this.isLoading = false
              } else {
                this.$message.success('操作成功')
                this.visible = false
                this.isLoading = false
                this.$store.dispatch( //关闭当前页面路由
                  'tabsBar/delVisitedRoute',
                  this.$route.fullPath
                )
                this.$router.push(`/tcl/tof/message/workflow/wait-list`) //跳转到待办列表页面
              }
            })
            .catch((error) => {
              this.$message.error(error)
              this.isLoading = false
            })
        } else {
          // 撤回
          backAction(this.$route.query.id) //撤回流程公共 接口
            .then((res) => {
              if (res.failed === true) {
                this.$message.error(res.message || '操作失败,请联系管理员')
                this.isLoading = false
              } else {
                this.$message.success('操作成功')
                this.$store.dispatch(
                  'tabsBar/delVisitedRoute',
                  this.$route.fullPath
                )
                // this.$router.go(-1)
                this.visible = false
                this.isLoading = false
                this.$router.push(`/tcl/tof/message/workflow/wait-list`)
              }
            })
            .catch((error) => {
              this.$message.error(error)
              this.isLoading = false
            })
        }
      },

4.父页面的handleMesg方法(重点交互)

//防抖 (debounce): 将多次高频操作优化为只在最后一次执行,通常使用的场景是:用户输入,只需再输入完成后做一次输入校验即可。
//防抖处理 高频调用
      handleMesg: Debounce(function (e) {
        if (e.data.type == 'getDataDetail') {
        //子页面想要获取待办详情接口数据 会主动发送一个事件过来
        //如判断type是哪个页面过来的
         //这里向子页面发送数据回去
          this.$refs.iframe.contentWindow.postMessage(
            workDetailsData.workflowList, //待办详情接口返回的数据
            '*'
          )
        }
        //这里可以自定义提示信息的操作
        //iframe子页面会发送一个方法过来 如第五点
        if (e.source) {
          if (e.data.status == 'Approved') {
            //补充知识
            //getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
            //NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
            //提示: 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。

            let doms = document.getElementsByClassName('el-message')[0]
            if (doms == undefined) {
              this.$message.success('审批通过')
            }

            this.visible = false
            this.$store.dispatch(
              'tabsBar/delVisitedRoute',
              this.$route.fullPath
            )
            if (this.$route.query.type === 'workflow')
              this.$router.push(`/tcl/tof/order/sales/workflow`)
            else this.$router.push(`/tcl/tof/message/workflow/wait-list`)
          } else if (e.data.status == 'Rejected') {
            let doms = document.getElementsByClassName('el-message')[0]
            if (doms == undefined) {
              this.$message.success('审批拒绝')
            }

            this.visible = false
            if (this.$route.query.type === 'workflow')
              this.$router.push(`/tcl/tof/order/sales/workflow`)
            else this.$router.push(`/tcl/tof/message/workflow/wait-list`)
          } 
          } else if (e.data.status == 'innerError') {
            let msgObj = e.data
            this.$message({
              type: msgObj.msgType,
              message: msgObj.msg,
            })
          }
        }
      }),

5.子页面方法

that.postMsgToFrame('缺少附件', 'warning')
postMsgToFrame(msg, errType) {
    if (this.isPorcess) {
      window.parent.postMessage(
        {
          type: 'custAddMsg',
          status: 'innerError',
          msgType: errType,
          msg: msg,
        },
        '*'
      )
    } else {
      this.$message({
        type: errType,
        message: msg,
      })
    }
  },

子页面一开始要获取审批流待办详情接口数据来进行一些判断如下

mounted() {
      // console.log('workDetailsData', workDetailsData)
        //首先向父页面主动发送事件
      if (this.$route.query.type == 'delay') {
        window.parent.postMessage(
          {
            type: 'getDataDetail',
          },
          '*'
        )
        //父页面发送事件过来,这里接收事件和数据,进行对应的操作,如判断该字段在哪个节点是否需要显示
        window.addEventListener('message', (e) => {
          if (e.data) {
            let showNode = []
            if (this.options.nodeStatus && this.options.nodeStatus.length > 0) {
              this.options.nodeStatus.forEach((item) => {
                showNode.push(item.value)
              })
              console.log('这里的数据看看', showNode)
              if (showNode.indexOf(e.data.name) != -1) {
                obsData.isFlagShowCol = true
              }
            }
          }
        })
        
      }
    },

配置平台配置流程

iframe页面判断审批同意接口是否调用自己中心的后端接口

computed: {
    isPorcess: {
        get() {
          let ll = this.$route.query
          if (ll.custPostMsgFlg && ll.custPostMsgFlg.indexOf('true') > -1) {
            return true
          } else {
            return false
          }
        },
      },
}

进入页面在mounted判断,需要节点都挂载完毕,然后在方法methods中调用审批方法,是由父页面点击审批通过发送事件过来进行调用

mounted() {
    if (this.isPorcess) {
      window.addEventListener('message', this.handleMesg)
    }
}
methods: {
    // 点击审批
      async handleMesg(e) {
        console.log('e', e)
        if (e.data.status === 'Approved') { //判断是否同意
          // this.$refs.Address.$refs.tabs.validate()
          this.examineApprove()
        }
      },
    async examineApprove() {
        //先进行表单必填校验操作 通过才调用接口
        let flag = await this.$refs.Address.validateForm()
        this.$refs['commentForm'].validate((isPass) => {
          this.schema_model.comment = this.commentForm.comment //批注自定义
          this.$refs['filterForm'].validate((valid) => {
            //校验
            if (valid && flag && isPass) {
              const loading = this.$baseLoading({
                target: 'document.body.tree',
              })
              subsidyPriceProcess(this.schema_model).then((res) => {
                if (res.success == false) {
                  loading.close()
                  this.$message.error('审批不通过,接口报错')
                } else {
                  loading.close()
                  //iframe 向父组件传值
                  window.parent.postMessage(
                    {
                      type: 'commodityApprove',
                      status: 'Approved',
                    },
                    '*'
                  )
                }
              })
            } else {
              this.$message({
                type: 'error',
                message: '表单校验不通过!',
              })
              return false
            }
          })
        })
      },
}

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

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

相关文章

SpringBoot集成Redis实现分布式会话

在单体应用的时代&#xff0c;Session 会话直接保存在服务器中&#xff0c;实现非常简单&#xff0c;但是随着微服务的流行&#xff0c;现代应用架构基本都是分布式架构&#xff0c;请求随机的分配到后端的多个应用中&#xff0c;此时session就需要共享&#xff0c;而存储在red…

【运动控制】CNC三轴小线段路径规划

CNC三轴小线段路径规划 文章目录CNC三轴小线段路径规划一、项目说明二、具体实现1、速度规划2、小线段插补3、运动学逆解刀轴插补点4、差分处理得到实际的速度和加速度5、加速度滑动平均6、实现的效果如图所示三、Reference写在前面&#xff0c;本文是作为一个练手小项目的总结…

2023年阿里云ECS服务器S6/C6/G6/N4/R6/sn2ne/sn1ne/se1ne处理器CPU性能详解

阿里云ECS服务器S6/C6/G6/N4/R6/sn2ne/sn1ne/se1ne处理器CPU性能怎么样&#xff1f;阿里云服务器优惠活动机型有云服务器S6、计算型C6、通用型G6、内存型R6、云服务器N4、云服务器sn2ne、云服务器sn1ne、云服务器se1ne处理器CPU性能详解及使用场景说明。 1、阿里云服务器活动机…

Ollydbg简明使用指南

OllyDebug&#xff0c;简称OD&#xff0c;一种反汇编软件&#xff0c;动态追踪工具&#xff0c;将IDA与SoftICE结合起来的思想&#xff0c;Ring 3 级的调试器。OllyDebug的使用界面是可视化操作。 英文版 Read this for quick start. Consult help file for details and more …

Hive窗口函数

概述 窗口函数&#xff08;window functions&#xff09;也叫开窗函数、OLAP函数。 如果函数具有over子句&#xff0c;则它是窗口函数 窗口函数可以简单地解释为类似于聚合函数的计算函数&#xff0c;但是通过group by 子句组合的 常规聚合会隐藏正在聚合的各个…

task与function

task和function主要是有助于代码的可重用性&#xff0c;都可以在module-endmodule之外声明。 1.function 1.1.function逻辑的综合 function&#xff1a;一个只有1个wire型输出值、全是组合逻辑的函数&#xff0c;且函数名即输出信号名&#xff0c;小括号中按顺序例化输入信号。…

C语言中#include<...>和#include“...“的区别

C语言文章更新目录 C语言学习资源汇总&#xff0c;史上最全面总结&#xff0c;没有之一 C/C学习资源&#xff08;百度云盘链接&#xff09; 计算机二级资料&#xff08;过级专用&#xff09; C语言学习路线&#xff08;从入门到实战&#xff09; 编写C语言程序的7个步骤和编程…

深入浅出C++ ——哈希的应用

文章目录一、位图1. 位图的概念2. STL中的位图3. 位图的特点4. 位图的应用5. 位图的实现6. 位图的使用二、布隆过滤器1. 布隆过滤器提出2. 布隆过滤器概念3. 布隆过滤器的设计思路4. 布隆过滤器的插入5. 布隆过滤器的查找6. 布隆过滤器删除7. 布隆过滤器的优缺点8. 布隆过滤器的…

div增加鼠标点透,css设置点击穿透

需求&#xff1a;将一张照片盖到一个div上面&#xff0c;但同时下面div上面的点击事件不受影响。 这样就需要用到 CSS 的鼠标穿透属性&#xff1a;pointer-events: none&#xff0c;下面主要对pointer-events属性的值做一个简单的介绍。 pointer-event的所有属性值: pointer…

计讯物联环保数采仪全系列产品为节能降耗减碳贡献绿色力量

政策背景 近日&#xff0c;工业和信息化部、国家发展改革委、生态环境部三部门联合印发《工业领域碳达峰实施方案》&#xff08;以下简称“方案”&#xff09;。《方案》提出&#xff0c;促进中小企业绿色低碳发展。优化中小企业资源配置和生产模式&#xff0c;探索开展绿色低…

在字节跳动,造赛博古籍

“你在字节跳动哪个业务&#xff1f;”“古籍数字化。把《论语》《左传》《道德经》这些古籍变成电子版&#xff0c;让大家都能免费看。”没错&#xff0c;除了你熟悉的那些 App&#xff0c;字节跳动还在做一些小众而特别的事情&#xff0c;古籍数字化就是其中之一。在字节跳动…

Python+Selenium4元素交互1_web自动化(5)

目录 0. 上节回顾 1. 内置的等待条件 2. 元素属性 1. Python对象属性 2. HTML元素属性 3. 元素的交互 1. 输入框 2. 按钮 3. 单选框和复选框 0. 上节回顾 DEBUG的方式&#xff1a;JS断点 Python断点编程语言提供的等待方式&#xff1a;sleepselenium提供的等待方式&…

CDGA|浅谈“以治促用,以用促治”的数据治理战略

数据治理夯实企业数字化转型基础。采取“以治促用&#xff0c;以用促治”的数据治理战略&#xff0c;可以充分释放了企业核心运行要素的活力。 “以治促用”是指通过建立在数据治理链路及用户多维评估系统的基础上&#xff0c;对数据资产重新进行价值识别&#xff0c;推进高价值…

30岁测试开发年薪不足50万,被面试官嘲讽混得太差?

近日&#xff0c;有网友发帖称&#xff1a;“30岁去应聘测试开发&#xff0c;拿不到七八十万的年薪确实有点丢人了&#xff0c;还被面试官diss混得太差了”&#xff0c;网友们看完都炸了。 来看看网友们都是怎么说的。 有网友说&#xff1a; 扯淡 有网友气到&#xff1a; 那拿…

接口自动化

为了实现真正意义上的接口自动化&#xff0c;一般使用yaml文件存储测试用例&#xff0c;代码调用里面的数据来发送请求 Controller RequestMapping("/send") public class Login {ResponseBodyRequestMapping("/login")public State login(String name,Str…

ES6-ES11基本全部语法

在进入es6语法之前&#xff0c;先走一波es5遍历迭代Api&#xff0c;&#xff0c;它们的作用&#xff0c;应用场景&#xff0c;参数&#xff0c;以及返回值分别是什么。&#xff08;forEach、map、some、every、filter&#xff09;我们统一设定一个初始数组&#xff1a;let arra…

Prophet 处理时间序列数据

Prophet 处理时间序列数据 flyfish 论文地址 https://peerj.com/preprints/3190/ 官网 https://facebook.github.io/prophet/ 源码地址 https://github.com/facebook/prophet hon import pandas as pd from prophet import Prophet df pd.read_csv(https://raw.githubuse…

2月23号作业

题目&#xff1a;题目一&#xff1a;通过操作Cortex-A7核&#xff0c;串口输入相应的命令&#xff0c;控制LED灯进行工作--->上传CSDN 1.例如在串口输入led1on,开饭led1灯点亮 2.例如在串口输入led1off,开饭led1灯熄灭 3.例如在串口输入led2on,开饭led2灯点亮 4.例如在串口输…

[HarekazeCTF2019]Easy Notes

知识点&#xff1a;session 反序列化&#xff0c;代码审计代码分析 flag.php 中有个 is_admin 函数的判断。 在 lib.php 中有 is_admin 函数&#xff0c;需要 session[admin] 为 true&#xff0c;或者通过文件读取的方式。 在 index.php 中的 include 并不能使用伪协议读取 …

JVM回顾与Java虚拟机的内存管理

目录 什么是JVM&#xff1f; 主流虚拟机 JVM与操作系统关系 JVM、JRE、JDK的关系 Java程序的执行过程 JVM翻译字节码有三种执行方式 Java虚拟机的内存管理 JVM整体架构图 JVM运行时内存 Java7和Java8内存结构的不同主要体现在方法区的实现 对于Java8&#xff0c;HotSp…