【vue页面调用iframe嵌入页面方法并且传值,iframe里调用外部vue页面方法】
需求:vue项目里嵌入iframe页面,需要调用iframe页面里的方法并且把值传入进去来进行执行后续操作,如执行成功,需要在返回调用外部vue页面方法。提示:以下是本篇文章正文内容,下面案例可供参考一、具体代码提示:这里我把外部调里,里调外我都整合在一起写了,具体看注解。
·
文章目录
前言
需求:
vue项目里嵌入iframe页面,需要调用iframe页面里的方法并且把值传入进去来进行执行后续操作,如执行成功,需要在返回调用外部vue页面方法。
提示:以下是本篇文章正文内容,下面案例可供参考
一、具体代码
1.外部vue页面
代码如下(示例):
<!--
vue页面嵌入所要嵌入的iframe
-->
<template>
<div>
<iframe ref="iframe" :src="iframeSrc" id="iframeId"></iframe>
<el-button @click="driveFlowInstance('测试')">点击</el-button>
</div>
</template>
<script>
export default {
data() {
return {
iframeSrc: "" //这是要嵌入的页面url 这里就不写了
};
},
methods: {
//外部调iframe里方法
//触发方法,type需要传入的值//调用iframe里的方法并且传值
driveFlowInstance(type) {
var iframe_home = document.querySelector("#iframeId");
//["updateDubanForm"]这一部分是调用iframe里的方法命,里面"updateDubanForm"可以换成一个变量.
//也可以写成iframe_home.contentWindow.updateDubanForm(type);
iframe_home.contentWindow["updateDubanForm"](type);
},
//iframe里调外部方法
//方法名一定要保持一直,不然调用不到
iframeTextClick(row) {
console.log(row);
}
},
async mounted() {
//iframe里调外部方法
//因为是vue的语法进行写,一定要这样把方法进行生命,不然iframe回调这个方法找不到
window.iframeTextClick = this.iframeTextClick;
}
};
</script>
<style scoped></style>
2.iframe页面
代码如下(示例):
<!--
iframe页面这里我是用vue来写的
-->
<template>
<div>
<!--这是iframe页面回调于外部页面按钮并且回调传值-->
<el-button @click="textClick('测试1122')">iframe调外部方法</el-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
//外部调用iframe里方法
//这是vue要调用的方法,方法命要和外部调用的一致
updateDubanForm(type) {
console.log(type);
},
//iframe里调外部方法
//按钮触发方法,iframe回调执行外部方法
textClick(row) {
//回调
window.parent.iframeTextClick(row);
}
},
//初始化窗体
mounted() {
//外部调用iframe里
//因为是vue的语法进行写,一定要这样把方法进行生命,不然外部调用这个方法找不到
window.updateDubanForm = this.updateDubanForm;
}
};
</script>
总结
提示:这里我把外部调里,里调外我都整合在一起写了,具体看注解。
更多推荐
已为社区贡献1条内容
所有评论(0)