El proyecto vue utiliza páginas iframe padre-hijo para pasar valores.
1. El proyecto vue llama al método en la subpágina iframe.
1. Página principal
La clave para llamar al método de subpágina es obtener los atributos iframe
del objeto elemento.contentWindow
this.$refs.iframeName.contentWindow.FunctionName()
<template>
<div class="pjpccx">
<h1 class="title_color">{
{
title }}</h1>
<button @click="reportPrint">点击调用iframe中的方法</button>
<iframe ref="iframe" src="/static/zkjs/base.html" width="100%" height="100%" style="border: none;" class="iframe" frameborder="0" scrolling="yes" name="iframe" seamless>您的浏览器版本过低,无法显示报表内容!建议升级浏览器或更换浏览器!</iframe>
</div>
</template>
export default {
methods: {
reportPrint() {
// 父页面调用子页面方法
this.$refs.iframe.contentWindow.openThePage()
// 父页面向子页面传值
this.$refs.iframe.contentWindow.postMessage(param)
}
}
}
2. Subpágina
<script type="text/javascript">
// 打开某一页
function openThePage() {
new Device().startFun()
}
// 子页面接受父页面的传值
window.addEventListener('message', messageEvent => {
if (messageEvent.source != window.parent.window.parent) return;
paramData = messageEvent.data
changeUrl(paramData)
})
</script>
2. En la página iframe, llame al método en la página principal que hace referencia a ella.
1. Página principal
La página principal solo necesita agregar eventos 监听器
, y la ejecución en la devolución de llamada requiere ejecutar métodos o usar parámetros.
mounted() {
let _this = this
// 父页面接受子页面的传值
window.addEventListener('message', function (e) {
console.log(e) //{data:'params'}
console.log(e.data.Name||e.data.result.Name)
_this.form.name = e.data.Name||e.data.result.Name
})
},
2. Subpágina
window.parent.postMessage
Comunicación implementada por subpáginas a través de métodos.
function setCertificateData(result) {
// 子页面传值给父页面
window.parent.postMessage({
data: "params",
}, '*');
// 子页面传值给指定父页面
window.parent.postMessage(result.Certificate, 'http://localhost:8080/#/formVue');
window.parent.postMessage({
result: result.Certificate}, 'http://localhost:8080/#/formVue');
}