网站建设功能解说推广营销方案
业务:目标界面的是用原生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? ,不同域怕是不能 。