vue iframe高度自适应 实用

vue iframe高度自适应 实用iframe 是 vue 的 在使用过程中高度根据数据实时变化 不好设置 iframe 的高度值 试了多种方式之后 总结了几种自适应的方式 实时刷新 iframe 高度变化 variframes document getElementsB iframe setInterval function for vari 0 j iframes length i

iframe是vue的,在使用过程中高度根据数据实时变化,不好设置iframe的高度值。试了多种方式之后,总结了几种自适应的方式。

实时刷新iframe高度变化

var iframes = document.getElementsByTagName('iframe'); setInterval(function() { for (var i = 0, j = iframes.length; i < j; ++i) { iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight); } }, 1000); 

iframe高度有变的时候通知父级

// iframe this.$nextTick(()=>{ parent.window.iframeChangeHeight() }) 
// 父级 function iframeChangeHeight(){ var iframes = document.getElementsByTagName('iframe'); for (var i = 0, j = iframes.length; i < j; ++i) { iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight); } } 

iframe高度有变的时候直接修改iframe高度

function iframeChangeHeight(){ let iframes = window.parent.document.getElementsByTagName('iframe'); for (var i = 0, j = iframes.length; i < j; ++i) { iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight) } }, 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/232913.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 华为模拟器 eNSP安装教程「建议收藏」

    华为模拟器 eNSP安装教程「建议收藏」随着华为网络设备的日渐普遍,华为网络设备的使用越来越多,学习华为网络路由知识的人也越来越多,华为提供的eNSP模拟软件,能够很好的为初学者提供很好的模拟学习软件。一、准备工作软件:ensp软件为免费软件,可以在华为官网上进行下载,版本:eNSPV100R002C00B320window10操作系统二、安装步骤1、下载eNSP软件:该软件为免费…

    2022年10月14日
    3
  • 实体-联系图(ER图)_实体关系图

    实体-联系图(ER图)_实体关系图我们通常用实体、联系和属性这三个概念来理解现实问题,因此ER模型比较接近人的思维方式。此外,ER模型用简单的图形符号表达系统分析员对问题域的理解,不熟悉计算机技术的用户也能理解它,因此,ER模型可以作为用户与分析员之间有效的交流工具。一、ER模型ER模型中包含3种相互关联的信息:数据对象、数据对象的属性及数据对象彼此之间相互连接的关系。1.数据对象数据对象是对软件必须理解的复合信息…

    2025年11月23日
    2
  • java Map遍历的5种方法和一些基本使用

    java Map遍历的5种方法和一些基本使用一:基本使用Map&lt;String,Integer&gt;map=newHashMap&lt;&gt;();map.put("a",1);map.put("b",2);booleanb=map.containsKey("3");//map中是否包含key为3的键值。System.out.pr.

    2022年9月21日
    2
  • 视频识别的基础概念[通俗易懂]

    视频识别的基础概念[通俗易懂]视频识别一、视频识别几大问题2、常见的解决方案iDTTwo-StreamTSNC3DTDDRNNRPAN一、视频识别几大问题未修剪视频分类(UntrimmedVideoClassification):通过对输入的长视频进行全局分析,然后软分类到多个类别修剪视频识别(TrimmedActionRecognition):给出一段只包含一个动作的修剪视频,要求给视频分类时序行为提名(TemporalActionProposal):从长视频中找出可能含有动作的视频段时序行为定位(Tempor

    2022年4月29日
    71
  • idea在线激活(JetBrains全家桶)

    (idea在线激活)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlFNWCMR37AF-eyJsaWNlbnNlSWQi…

    2022年3月30日
    232
  • pycharm 不显示 plot 绘图

    pycharm 不显示 plot 绘图查了很多,都是说加:plt.show()但加过之后仍然不显示后来,我把importmatplotlib.pyplotasplt提到了另外几个import的前面,就正常显示了

    2022年8月27日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号