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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/github_36091081/article/details/80797581

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";
			}
		});
	} 
});

这样，这个问题就解决了。