在用layui admin做响应式的后台管理系统时，发现在IOS上iframe宽高超过可视区域，不能够自适应，即使你做了适配或者使用了栅格布局。查阅发现，这可能是IOS系统的一个Bug，我们无法改变IOS系统，但我们能改变我们的demo，所以iframe这种东西今后还是慎用的好。

1. 通过给iframe的父级div元素添加样式并给iframe添加属性和样式可以解决这个问题，但是影响了Android端和PC端的超宽滚动，在高度超过可视区域时并不是最好的选择。

1
2
3
<div class="layui-tab-item layui-show" style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;">
    <iframe src="/StoreAdmin/ManageCenter" name="child" id="child" frameborder="0" height="100%" scrolling='no' style="width: 1px; min-width: 100%; *width: 100%;"></iframe>
</div>

2. 通过js获取文档内容的高度并赋给iframe元素。

1
2
3
4
5
6
7
8
9
10
11
12
//注意：下面的代码是放在和iframe同一个页面中调用
$("#iframeId").load(function () {
    var mainheight = $(this).contents().find("body").height() + 30;
    $(this).height(mainheight);
});

//注意：下面的代码是放在iframe引用的子页面中调用
$(window.parent.document).find("#iframeId").load(function () {
    var main = $(window.parent.document).find("#iframeId");
    var thisheight = $(document).height() + 30;
    main.height(thisheight);
});

3. 通过js判断手机端系统并动态设置iframe高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 //解决ios系统iframe bug
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
console.log(isAndroid + "|" + isiOS);
if (isAndroid) {
    $(".clildFrame .layui-show").removeAttr("style");
    $("#child").removeAttr("frameborder");
    $("#child").removeAttr("height");
    $("#child").attr("scrolling","auto");
    $("#child").removeAttr("style");
}
else { //解决ios iframe高度问题 动态设置高度 之前else if(isIOS){}
    $("#child").load(function () {
        setTimeout(function () {
            var mainheight = $("#child").contents().find("body").height() + 52;
            console.log(mainheight);
            $("#child").height(mainheight);
        }, 1000);
        
    });
}