Vue中使用iframe

Vue中使用iframe

1) 使用的技术: vue.js + iframe

2) 场景:

 a)父页面调用子页面某些DOM的高度以完成"父页面高度自适应需求";
 b)子页面调用父页面的方法以完成"新增,删除,提交,保存,等操作对高度的自适应变化";

3) 代码示例:

<div id="whsZero">
    <iframe ref="whZero" :src="whichQuestion0" frameborder="0" style="width: 100%;height: 100%;"></iframe>
</div>

3-1)父页面获取子页面高度方法

父页面获取子页面iframe的高度方式:
this.$refs.whZero.contentWindow.$('#addChildTaskForm').height() //$('#addChildTaskForm')是子页面中ID选择器
contentToggle(){
	$("#whsZero").css({"width":"100%","height":this.$refs.whZero.contentWindow.$('#addChildTaskForm').height()+"px"})
}

3-2)子页面出现新增,删除,提交,保存操作(父页面重新获取子页面iframe的高度以完成高度的自适应)----parent.supplierInvite.contentToggle()

addTr: function() { 
	//重新获取父级的div设置高度,避免出现高度滚动条
	//Vue框架下调用父级的方法,其中supplierInvite是定义 var spI = new Vue({})
	parent.spI.contentToggle()
}

4) 小结: 因为对iframe不经常使用,在做这个时候遇到不少问题,比如contentWindow , var spI = new Vue({}) , parent.spI.‘父页面的方法’,踩坑之路继续…