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

最新推荐文章于 2022-09-07 11:42:25 发布
最新推荐文章于 2022-09-07 11:42:25 发布
阅读量5.1k 收藏 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
    评论
解决layer弹出层自适应页面大小的问题
10-16
今天小编就为大家分享一篇解决layer弹出层自适应页面大小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layer弹窗:top.layer弹窗到父页面跨域解决办法
05-15
layer弹窗:top.layer弹窗到父页面跨域，通过postMessage方法将子页面的配置对象发送到父页面中，父页面再通过子页面的配置对象打开弹窗，对象内不能存在事件。
php 提交表单 关闭layer弹窗iframe的实例讲解
10-18
今天小编就为大家分享一篇php 提交表单 关闭layer弹窗iframe的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layer - 简单好用的Web弹出层组件使用详解7（常用的回调方法）
你好，我姓刘
09-07 1131
弹出框最大化、最小化、还原后分别会触发 full、min、restore 这几个回调方法。这些方法都只携带一个参数：当前提示框的 DOM 对象。当我们拖拽提示框右下角对窗体进行尺寸调整时，会触发 resizing 这个回调方法。该回调返回一个参数：当前提示框的 DOM 对象。当我们拖动提示框改变位置后，会触发 moveEnd 这个回调方法。如果我们想在弹出框显示完毕时执行一些语句，使用使用 success 这个回调方法。无论是确认还是取消，只要弹出框被销毁了，end 这个回调方法都会执行。
真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
热门推荐
巴黎的妖
05-19 21万+
今天有朋友问到我关于“iframe自适应高度”的问题，原本以为是很简单的问题，没想到折腾了20分钟才搞定。期间遇到几个问题，要么是高度自适应了，但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动跟随变大显得很小，或是当窗口缩小时iframe还是之前那么大就出现了滚动条。还有或是高度不准确，那么就达不到想要的效果了。 为什么需要使用iframe自适应高度呢？其实就是为
使用 Layer 弹出 iframe 层，并让 iframe 自适应内容宽高
weixin_30394251的博客
12-20 1667
1.Layer简介 layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件，对各类浏览器中的兼容性也很好。使用它可以创建出交互体验更好的 Web 应用程序。 layer 的维护人员是一群和小G年龄相仿，富有激情的前端开发人员，所以大家不用担心它的升级问题。 layer 的官方网址：layer 官方演示与讲解 2.Layer的使用 (1) 访问官网下载最新版本的 layer，...
layui弹窗ifarme引入自适应页面（vw）样式缩小
maggie的博客
10-18 1098
问题描述及分析：layui弹窗的宽高不是铺满屏幕的，是在屏幕中间，而做了自适应的页面采用是vw单位，正常情况是自适应的页面的宽根据浏览器窗口的宽度自适应，但是应为layui弹窗的ifame是设置了固定宽高的，此时ifarme页面引入自适应页面后，自适应页面获取到的html，body的宽高不是浏览器的而是layui的iframe，所以会出现自适应页面会缩小的情况。 解决方法：自适应页面的根元素设置字体大小为20px,代码如下： 第一步：
解决layui 弹窗中 table 宽度无法自适应问题
wangruoyao0317的博客
05-15 6969
layer.open({ type: 1, title: "", shade: 0, offset: 'lt', resizing: function () { ...
根据屏幕分辨率设置 layer.open 的大小
King Saj
08-13 3053
function demo() { // 监听分辨,设置 layer.pon大小 var area = []; if (window.screen.width > 1680 && window.screen.width <= 1920) { area = ['58%', '96%'] } else if (window.screen.width > 1600 && window.screen.width <= 1680) { are
layui的layer.open弹出层高度宽度自适应解决方法
qq_43253598的博客
12-09 6488
文章目录前言根据当前页面的宽度高度来改变layer弹窗的大小 前言 layer弹出窗口在弹出时指定了area，弹出后，如果当前页面的大小比弹出的窗口小，那么就会出现无法操作弹出窗口的情况。如图: 当前页面的大小不足以展示整个弹窗的内容,只能将页面放大全屏才可以看到整个弹窗内容，对其操作。 根据当前页面的宽度高度来改变layer弹窗的大小 代码如下（示例）： function onclick() { //获取当前页面的高度 var height = $(document.body).heig.
Thinkphp5结合layer弹窗定制操作结果页面
10-19
主要介绍了Thinkphp5结合layer弹窗定制操作结果页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
layui弹窗自适应变大_layui弹窗宽度固定高度自适应界面
weixin_39622901的博客
12-18 815
//默认上下15px的边距高度，可根据需要修改function layuiDialogFitScreen(){var layui_title_height=$(window.parent.document).find(".layui-layer-title").height();var border_margin=30;var minH=150;var _margin=0;var _top=$(w...
layui iframe弹出层高度自适应，并垂直居中
gdali的专栏
06-09 1万+
1、高度自适应：代码：success: function(layero, index) {  layer.iframeAuto(index);},2、垂直居中进入layer.js，增加几行代码。具体如图：代码：  var bodyHH = document.documentElement.clientHeight;  if(heg + titHeight + btnHeight &gt; $(wi...
jquery3和layui冲突导，致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
weixin_30577801的博客
05-11 334
项目中使用的jquery版本是jquery-3.2.1，在使用layui弹出全屏iframe窗口时，iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="...
关于layui的layer.open弹出层高度自适应的解决
yzw675628706的博客
03-31 1万+
在使用layui的layer插件打开弹出层的时候，会出现弹出层的Iframe高度设置为默认的150px，这样会导致出现滚动条或者内容显示不全的现象，在网上面也搜索了对应的解决方案。 **方案一：在弹窗的时候，设置area只规定宽度，不设置高度，让插件自适应，**如下： layui.layer.open({ type:2, //此处只规定宽度，不规定高度，让插件自适应高度 area:['300px'], content:'www.baidu.com', shade:0.5, title:'百度页面
layui 弹层自适应_layer实现弹出层自动调节位置
weixin_29219539的博客
02-26 2842
项目中有弹出层的内容是不固定的，根据情况可能变长变短，于是就要求做layer弹出层的大小自适应，查询了api后发现layer.iframeAuto方法可以实现，这里吐槽一点，ie浏览器的html没有被body撑大，而iframeAuto方法是根据html的高度计算的，导致我之前出现在ie下，调用iframeAuto后高度直接变零。好了，做好了这一点之后，测试又提出一个问题，因为他是用小屏幕测试的，...
iframe嵌入网页时，页面大小怎么自适应
五花漏的博客
02-24 2万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
如何将引入的iframe页面缩小，适应当前页面
前端小贤
11-29 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, m
layer弹出iframe的高度不自适应。一直是150px
csx blog
06-25 1万+
layer弹出iframe的高度不自适应。一直是150px通常我们用layer都是点击事件中弹出layer，如下：$("#loginbtn").click(function(){     layer.open({     type: 2,     title: '欢迎登录',     skin: 'login-class',     maxmin: false,     title: false,...
parent.layer.open页面大小自适应
最新发布
08-31
为了实现页面大小的自适应，可以将area参数的值设置为['auto', 'auto']，这样弹层的宽度和高度会自动根据内容进行调整，使得页面大小适应内容的大小。 代码示例： parent.layer.open({ title: '页面标题', type: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值