iframe页面传值取值

业务：目标界面的是用原生js写的  ，  被镶嵌到vue平台上  ， 现在要求vue点击跳转的时候 ，要附带上值 ，让原生界面获取到值 ， 完成页面设置查询。

想法 ： vue跳转，使用this.$route.query 传值取值 ， 取值后给原生html（iframe），传值  。 也就是“父（vue）传子（原生html） ” ， 子页面取值使用 

千度大法 ： 

1.子传父 ：

一  ：//根据iframe的id获取对象  ：

var i1 = window.frames['iframeId'];  

var iframe =window.frames[0];也可以  

二 ： //获取iframe中的元素值  

var val=i1.document.getElementById("t1").value  

 2.父传子（重点！！！）

在iframe中获取父页面中的元素值：

var val = parent.document.getElementById("txt1");   

由此，方案一 ： 将需要传的值赋值在vue某个隐藏标签上 ， 然后在子页面上获取到需要传的值

3.利用url地址 ，进行父子传值通信（可能有加密隐患，业务忽略） 

发送,接受：

 // 子传父 ：window.parent.postMessage({          status: 'ok',          params: { id:111 }}, '*');

//父传子

 <iframe src="http://1.1.1.1:9084/gps_web/new/passengerFlow/realTime.html?params=${{params}}"/>

子页面拿数据 ： 

const params = JSON.parse(decodeURIComponent(window.location.hash.split('?')[1]))

window.addEventListener('message', function (msg) {
console.log(msg.data);
})

由此 ， 方案二：，父页使用url地址进行传值  ，子页面通过url拿到父页面传值 ‘

猜想 ： 能否使用本地储存sessionStorage？ ，不同域怕是不能 。