layer弹窗中的iframe页面根据其窗口伸缩大小自适应

最新推荐文章于 2023-04-14 10:41:05 发布
最新推荐文章于 2023-04-14 10:41:05 发布 4826 收藏 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38418891/article/details/94382839
版权

1.首先在layer.open中的resizing伸缩回掉函数中通过window[layero.find(‘iframe’)[0][‘name’]];找到iframe子页面dom对象,然后在通过layero获取当前layer对象中的layero[0].scrollHeight高度,然后通过iframe父页面向子页面传参的方式将scrollHeight高度传递给子页面,子页面将接收到的scrollHeight高度，通过jq设置为子页面的父容器高度即可。
A.获取scrollHeight高度代码截图如下:
在这里插入图片描述
B.layer的resizing回掉函数中处理scrollHeight高度获取
在这里插入图片描述

大芋头~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Thinkphp5结合layer弹窗定制操作结果页面
10-19
主要介绍了Thinkphp5结合layer弹窗定制操作结果页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
layer弹窗:top.layer弹窗到父页面跨域解决办法
05-15
layer弹窗:top.layer弹窗到父页面跨域，通过postMessage方法将子页面的配置对象发送到父页面中，父页面再通过子页面的配置对象打开弹窗，对象内不能存在事件。
layui layer弹框 去除右上角放大按钮只留缩小按钮，
最新发布
qq_37263478的博客
04-14 81
三个事件解决问题
解决layer弹出层自适应页面大小的问题
10-16
今天小编就为大家分享一篇解决layer弹出层自适应页面大小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
php 提交表单 关闭layer弹窗iframe的实例讲解
10-18
今天小编就为大家分享一篇php 提交表单 关闭layer弹窗iframe的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iframe高度自动伸展
ljf37
04-10 128
实现功能：在页面中iframe的高度，会随着iframe载入内容多时，自动伸展。 1、写一个js方法。 2、在iframe中的onload事件时调用该方法。 注意:iframe的ID值和方法中使用的ID值保持一致。 [code="java"] function SetCwinHeight() { var cwin=document.getE...
layui的layer iframe禁止缩放拖拽
热门推荐
heerey525
07-04 1万+
弹层组件文档 - layui.layerlayer 至今仍作为 layui 的代表作，她的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer已成为国内最多人使用的 Web 弹层组件，GitHub 自然Stars5000+，官网累...
iframe自动拉伸处理
zjucs2008zyj的专栏
05-07 1693
  这两天在作工业设计申请精品课程网站时遇到的一些问题，也找到了一些基本方法，罗列如此一、关于iframe，iframe不会跟随所载入页面的长度而拉伸，有两种方法解决这一问题：1、script language="Javascript">var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexO
layui的弹出层如何自适应屏幕大小？
blbyu的博客
06-08 1482
天干物燥，话不多说，直接上代码。 第一步，定义一个变量daxiao，定义函数screen。 第二步，在layer.open中的area属性中对daxiao进行判断。 <script> var daxiao=9; function screen() { //获取当前窗口的宽度 var width = $(window).width(); if (width > 1200) { ret
layui弹窗自适应变大_layui怎么调整弹框大小？
weixin_39789327的博客
12-18 5524
layui怎么调整弹框大小？下面本篇文章给大家介绍一下layui中调整layer弹出窗体大小的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。layer是一个备受青睐的web弹层组件，在默认状态下layer的宽高都自适应的，但当需要自定义宽度时，可以使用area: ['500px', '400px']进行设置。设置代码：layer.open({type: 2,area:["5...
layui弹窗ifarme引入自适应页面（vw）样式缩小
maggie的博客
10-18 704
问题描述及分析：layui弹窗的宽高不是铺满屏幕的，是在屏幕中间，而做了自适应的页面采用是vw单位，正常情况是自适应的页面的宽根据浏览器窗口的宽度自适应，但是应为layui弹窗的ifame是设置了固定宽高的，此时ifarme页面引入自适应页面后，自适应页面获取到的html，body的宽高不是浏览器的而是layui的iframe，所以会出现自适应页面会缩小的情况。 解决方法：自适应页面的根元素设置字体大小为20px,代码如下： 第一步：
使用layer弹窗,制作编辑User信息页面的方法
10-16
今天小编就为大家分享一篇使用layer弹窗,制作编辑User信息页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js控制iframe的高度/宽度让其自适应内容
10-26
主要介绍了如何使用js控制iframe的高度/宽度让其自适应内容,需要的朋友可以参考下
layer实现弹窗提交信息
09-01
主要为大家详细介绍了layer实现弹窗提交信息的相关代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
layer弹窗弹出子页面
01-19
layer弹窗弹出子页面
layer.open关闭父窗口 以及调用父页面的方法
10-18
今天小编就为大家分享一篇layer.open关闭父窗口 以及调用父页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
java布局大小设置全屏,全屏：调整其父视图大小时不调整AVPlayerLayer的大小
weixin_42136365的博客
03-11 261
有一种更好的方法来实现这一目标 . 这是 AVPlayerLayer -backed视图，即试图保持视频宽高比 . 通常只使用AutoLayout .PlayerView.h：@interface PlayerView : UIView@property (strong, nonatomic) AVPlayerLayer *layer;@endPlayerView.m：@interface Pl...
综述iOS视图的frame、bounds、center、position、anchorPosition等与位置、大小有关的属性
赤条条的博客
11-20 3322
在iOS开发开发过程中经常会用到界面元素的frame、bounds表示大小和位置的属性以及center、position、anchorPosition等单纯表示位置的属性。这些属性究竟什么含义？彼此间又什么关系呢？下面就来浅谈一番。 首先来说说frame和bounds。         frame：描述当前界面元素在其父界面元素中的位置和大小。         bounds：描述当前界面
获取Iframe页面高度，并将高度赋值给Iframe
小施_za的博客
11-13 9229
页面布局使用iframe嵌套，iframe设置高度根据页面内容的高度自适应。代码如下（设置父级页面）： HTML部分： JS部分： //获取iframe子页面内容高度给iframe动态设置高度 function iFrameHeight() { var ifm= document.getElementById("iframeId"); var subWeb = docume
iframe里面使用top.layer.open报错
02-16
这个报错通常是由于在一个iframe中调用了top.layer.open函数，但是在顶层窗口（即父窗口）中没有引入layer库所致。 解决这个问题的方法是在父窗口中引入layer库，确保在iframe中调用top.layer.open函数时可以正确地找到该函数所在的库。你可以在父窗口中添加以下代码来引入layer库： ``` <script src="layer.js"></script> ``` 其中，"layer.js"是layer库的文件路径，你需要根据实际情况修改该路径。 如果你已经在父窗口中引入了layer库，但仍然出现了该错误，可能是由于父窗口和iframe中引入的layer库版本不一致所致。此时，你需要确保父窗口和iframe中引入的layer库版本一致。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大芋头~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值