jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题


Posted in jQuery onMay 12, 2019

项目中使用的jquery版本是jquery-3.2.1,在使用layui弹出全屏iframe窗口时,iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏,代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>zqc</title>
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<script src="layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
 var layer = layui.layer
 ,form = layui.form;
//弹出即全屏
 var index = layer.open({
 type: 2,
 content: 'http://layim.layui.com',
 area: ['320px', '195px'],
 maxmin: true
 });
 layer.full(index);
});
</script> 
</body>
</html>

就是因为头部引入了 jquery-3.2.1.min.js导致iframe窗口无法全屏,效果如下

jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

解决办法:

方法一.使用layui内置的jquery

方法二.使用jquery1.X版本,我这里事更换的jquery-1.12.4,解决后代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>zqc</title>
 <script type="text/javascript" src="js/jquery-1.12.4.min"></script>
 <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<script src="layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
 var layer = layui.layer
 ,form = layui.form;
//弹出即全屏
 var index = layer.open({
 type: 2,
 content: 'http://layim.layui.com',
 area: ['320px', '195px'],
 maxmin: true
 });
 layer.full(index);
});
</script> 
</body>
</html>

总结

以上所述是小编给大家介绍的jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
详解jQuery如何实现模糊搜索
May 10 #jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
jquery登录的异步验证操作示例
May 09 #jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
四年级科学教学反思
2014/02/10 职场文书
ktv好的活动方案
2014/08/15 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2014年应急工作总结
2014/12/11 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA