vue项目使用 iframe 父子页面传值。
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue项目使用 iframe 父子页面传值。
一、vue项目调用iframe子页面中的方法。
1. 父页面
调用子页面方法的关键在于获取到iframe
元素对象后的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. 子页面
<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>
3. 子页面监听不到父页面的情况
父页面用this.$refs.iframe.contentWindow.postMessage(param)
,子页面监听不到父页面的传值的情况使用 onload
export default {
methods: {
reportPrint () {
const param = {
name: 'name',
value: '父传给子的值',
}
// 子页面监听不到父页面的情况使用以下方式
const myFrame = this.$refs['iframe'];
myFrame.onload = function () {
const iframeWin = myFrame.contentWindow
iframeWin.postMessage(param, '*')
}
}
}
}
二、在iframe页面中,调用引用它的父页面中的方法。
1. 父页面
父页面需要添加事件监听器
,在回调中执行需要执行方法或者使用参数,在组件生命周期结束的时候销毁监听器
。
export default {
mounted() {
// 添加事件监听器
window.addEventListener('message', this.handleMessage);
// 第二种
let _this = this
window.addEventListener('message', function (e) {
console.log(e, e.data.Name||e.data.result.Name)
_this.form.name = e.data.Name||e.data.result.Name
})
},
beforeDestroy() { // 移除事件监听器
window.removeEventListener('message', this.handleMessage);
},
methods: {
handleMessage(e) {
console.log(e.data.Name,e.data.result.Name)
}
}
}
2. 子页面
子页面通过window.parent.postMessage
方法实现的通信
function setCertificateData(result) {
// 子页面传值给父页面
window.parent.postMessage({
Name: "张三",
}, '*');
// 子页面传值给指定父页面
window.parent.postMessage({Name: "张三"}, 'http://localhost:8080/#/formVue');
window.parent.postMessage({result: {Name: "张三"}}, 'http://localhost:8080/#/formVue');
}
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)