使用iframe时动态获取内容高度
使用iframe时动态获取内容高度iframe页面里的内容是由vue写的。iframe要加在用js写的地方。原理:iframe嵌套,会有跨域问题。我们可以使用postMessage(),自行将内容高度不停的向外传。父页面,获取到高度设置给iframe。okdata () {return {infoMenu: infoMenu,indInfo:'',...
·
使用iframe时动态获取内容高度
iframe页面里的内容是由vue写的。
iframe要加在用js写的地方。
原理:iframe嵌套,会有跨域问题。
我们可以使用postMessage(),自行将内容高度不停的向外传。
父页面,获取到高度设置给iframe。ok
data () {
return {
infoMenu: infoMenu,
indInfo:'',
timer:'',
}
},
mounted () {
var _this = this
_this.timer = setInterval(function(){
top.postMessage(_this.$refs.dataCon.clientHeight,'*');
},300)
},
beforeDestroy(){
clearInterval(this.timer)
},
父页面接收
<iframe src="http://www.lincoc.com/#/data/shanghaiImportBOL" id="iframe" height="auto" width="1170px" scrolling="no" style="min-height:560px;overflow:hidden;display:block;margin:0 auto;"></iframe>
<script>
window.addEventListener("message", function (event) {
// 子窗口发送过来的数据
document.getElementById("iframe").height = event.data;
}, false);
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)