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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • LSTM时间序列预测及网络层搭建[通俗易懂]

    最近看到一篇博客,是时间预测问题,数据和代码的原地址在这里,https://www.jianshu.com/p/5d6d5aac4dbd下面只是对其复现和思考:首先关于数据预处理的问题,大家可以参考:https://blog.csdn.net/lilong117194/article/details/82911073这里的问题是:给你一个数据集,只有一列数据,这是一个关于时间序列的数据,从…

    2022年4月7日
    434
  • redisson集成springboot_spring整合redis详解

    redisson集成springboot_spring整合redis详解springboot集成redis非常简单1、引入maven依赖redis包<!–springboot整合redis–><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-redis&lt…

    2022年9月22日
    1
  • sop标准作业流程模板_一份标准作业流程SOP详解「建议收藏」

    什么是SOP?StandardOperationProcedure所谓SOP,是StandardOperationProcedure三个单词中首字母的大写,即标准作业程序。是以文件的形式描述作业员在生产作业过程中的操作步骤和应遵守的事项;是作业员的作业指导书;是检验员用于指导工作的依据。“制造”就是以规定的成本、规定的工时、生产出品质均匀、符合规格的产品。要达到上述目的,如果…

    2022年4月3日
    6.6K
  • lambda表达式pythonlist_Python学习笔记之lambda表达式用法详解

    lambda表达式pythonlist_Python学习笔记之lambda表达式用法详解本文实例讲述了Python学习笔记之lambda表达式用法。分享给大家供大家参考,具体如下:Lambda表达式使用Lambda表达式创建匿名函数,即没有名称的函数。lambda表达式非常适合快速创建在代码中以后不会用到的函数。麻烦的写法:defmultiply(x,y):returnx*y使用Lambda之后:double=lambdax,y:x*yLambda函…

    2022年10月17日
    3
  • Oracle BLOB类型进行插入

    Oracle BLOB类型进行插入字符串插入BLOB字段类型1.BLOBBLOB全称为二进制大型对象(BinaryLargeObject)。它用于存储数据库中的大型二进制对象。可存储的最大大小为4G字节2.CLOBCLOB全称为字符大型对象(CharacterLargeObject)。它与LONG数据类型类似,只不过CLOB用于存储数据库中的大型单字节字符数据块,不支持宽度不等的字符集。…

    2025年5月30日
    4
  • 微信上线新功能“话题”,字体一键变蓝色,还有超多视频看

    上个月,微信在朋友圈上线小功能【标签(话题)】,大家都知道吧? 发朋友圈时,输入“#+文字”,文字立马变成可点击的蓝色超链接。 如下图所示,哔哥好友发布的“#手工”以蓝色字体的形式…

    2020年11月20日
    381

发表回复

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

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