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)
上一篇 2025年9月1日 上午9:01
下一篇 2025年9月1日 上午9:22


相关推荐

  • java amqp_AMQP协议

    java amqp_AMQP协议当前各种应用大量使用异步消息模型 并随之产生众多消息中间件产品及协议 标准的不一致使应用与中间件之间的耦合限制产品的选择 并增加维护成本 AMQP 是一个提供统一消息服务的应用层标准协议 基于此协议的客户端与消息中间件可传递消息 并不受客户端 中间件不同产品 不同开发语言等条件的限制 当然这种降低耦合的机制是基于与上层产品 语言无关的协议 AMQP 协议是一种二进制协议 提供客户端应用与消息中间件之间

    2026年3月18日
    2
  • 普罗米修斯java_springboot集成普罗米修斯

    普罗米修斯java_springboot集成普罗米修斯点击上方“方志朋”,选择“设为星标”回复”666“获取新整理的面试文章Prometheus是一套开源的系统监控报警框架。它由工作在SoundCloud的员工创建,并在2015年正式发布的开源项目。2016年,Prometheus正式加入CloudNativeComputingFoundation,非常的受欢迎。简介Prometheus具有以下特点:一个多维数据模型,其中…

    2022年7月19日
    25
  • 豆包大模型应用算法工程师-Data AML

    豆包大模型应用算法工程师-Data AML

    2026年3月12日
    2
  • RelativeLayout里各个控件的相对位置

    RelativeLayout里各个控件的相对位置RelativeLayo 相对布局 RelativeLayo 是一种相对布局 控件的位置是按照相对位置来计算的 后一个控件在什么位置依赖于前一个控件的基本位置 是布局最常用 也是最灵活的一种布局 我们下面通过 XML 布局和 Java 代码布局两种方式分别举例 一 XML 方式布局 1 创建一个空白 Acti

    2026年3月18日
    1
  • Android开发入门教程pdf「建议收藏」

    Android开发入门教程pdf「建议收藏」下载地址:网盘下载欢迎进入神秘的android世界!自2008年相关设备进入市场以来,android的发展日新月异,android设备日益繁盛,而其背后开发应用潜藏的经济效益也展露无遗!作为android入门教程,本书将引领大家开发引人入胜的android2.x应用,包括如何设计gui、如何使用gps和访问web服务,以及如何将理念转换成实际应用!本书包含…

    2022年5月20日
    52
  • Linux命令总结归纳

    Linux命令总结归纳Linux命令总结归纳

    2022年4月22日
    161

发表回复

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

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