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.‘父頁面的方法’,踩坑之路繼續…