其他分享
首页 > 其他分享> > 跨源通信--postMessage用法

跨源通信--postMessage用法

作者:互联网

发送方:

function toEDC () {
  var edcObj = {
    adminUserVo: sessionStorage.getItem('userInfo'),
    token: sessionStorage.getItem('Admin-Token'),
    englishNameList: sessionStorage.getItem('englishNameList'),
    deseaseItem: sessionStorage.getItem('deseaseItem')
  }
  openEDC(edcObj)
}
function openEDC (edcObj) {
  const edcLoginUrl = http://localhost:52071/#/login
  const win = window.open(edcLoginUrl)
  window.addEventListener('message', e => {
    if (e.data.type === 'hello') {
      win.postMessage({ type: 'message', message: edcObj }, '*')
    }
  })
}

接收方:

receiveDH() {
			window.addEventListener('message', e => {
				if (e.data.type === 'message') {
					const data = e.data.message
					locals.setUserToken(data.token)
					this.setUserInfo(data.adminUserVo)
					this.setUserRauthority(data.englishNameList || [])
					localStorage.setItem('deseaseItem', data.deseaseItem)
					this.setIsReruitment(0)
					this.$router.push({
						name: 'TesteeList', 
						query: {
							// researchId: '1448889094275260417'
							researchId: JSON.parse(data.deseaseItem).edcSearchId
						}
					})
				}
				this.loading = false
			})
			window.opener.postMessage({ type: 'hello', message: 'ready' }, '*')
		}

注意:
此应用不可关闭发送方页面,当打开新页面的时候,发送方开始发送,接收方开始接受

标签:postMessage,edcObj,--,type,跨源,deseaseItem,window,message,data
来源: https://blog.csdn.net/aimin_com/article/details/121268573