layer弹出iframe的高度不自适应。一直是150px

layer弹出iframe的高度不自适应。一直是150px

通常我们用layer都是点击事件中弹出layer,如下:

$("#loginbtn").click(function(){
    layer.open({
    type: 2,
    title: '欢迎登录',
    skin: 'login-class',
    maxmin: false,
    title: false,
    closeBtn: 0,
    shadeClose: true, //点击遮罩关闭层
    area: ['760px', '80%'],
    btn:['1','2'],
    content: 'login.html',
    offset: '18%',
    })
});

通常,我们这样写没问题,但是,当我们需要页面加载后直接就弹出layer时,最常见应用场景就是注册页面加载后直接触发layer,弹出注册协议。

这时候问题来了,我们会发现 弹出的iframe的高度一直是150px,高度并不自适应。

 经分析:原因就是layer计算ifram的时候,页面还没加载完全,而ifram本身就是通过页面的高度的进行计算的(因为我高度设置的80%)

    

两种解决方案:

1、将 80%高 设置成具体的数值,比如 300px,但是这样做,不能达到弹出小窗自适应的效果

2、等页面完全加载完毕后,再出发layer,代码如下:

$(document).ready(function() {
	window.onload = function() {
		layer.open({
			type: 2,
			title: '注册协议',
			maxmin: false,
			shadeClose: false, // 点击遮罩关闭层
			area: ['1096px', '80%'],
			content: 'registeragree.html',
			offset: 'auto',
			btnAlign: 'c',
			closeBtn: 0,
			btn: ['同意并继续', '取消'],
			yes: function(index, layero) {
				layer.close(index);
				initPage();
				getVerifyCodeImg();
			},
			btn2: function(index, layero) {
				window.location.href = "index.html";
			}
		});
	} 
});
这样,这个问题就解决了。


你可能感兴趣的:(js)