• 移动端使用iframe碰到的那些坑


    这里简单谈一下移动端h5编程中碰到的iframe的bug,具体详述如下:

    在项目中,我主要使用iframe做弹出层,在iframe的外部放一层div,控制这个div,通过删除或追加div来决定是否使用iframe,iframe外层包div的做法也是很多博客里提倡用的做法。

    页面结构如下:

    <div class="iframe_pop_wrap">

    <iframe scrolling="no" allowtransparency="true" name="pop_iframe" id="pop_iframe" src="demo_iframe.html" frameborder="0">

    </iframe>

    </div>

    样式如下:

    .iframe_pop_wrap{position: absolute;top:0;left:0;100%;bottom:0;z-index:11;
                     overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
        box-sizing: border-box;

    }
    .iframe_pop_wrap iframe{position: absolute;top:0;left:0;100%;height:100%;overflow: hidden;background: transparent;}

    在demo_iframe.html页面中页面布局如下:

    <div class="modalCommonBg">
    </div>

    <div class="modalCommonBox">
    </div>

    我最开始时对modalCommonBg、modalCommonBox使用了一个fixed的定位方式,使用苹果手机打开时,弹窗全部消失了,我开始认识到在一个ios为操作系统的Safari浏览器或微信浏览器中,iframe的src所指向的页面内部不能使用fixed定位。于是,我开始想办法用绝对定位换掉固定定位。但当我使用absolute定位时,内容显示出来了,但是在页面的底部,有一部分内容消失了,由此我渐渐向着将内容展示出来的方向靠。在这个过程中,我将demo_iframe.html页面中设置了如下样式:

    html {
            height: 100%;
            100%;
            overflow:hidden;
        }

        body {
            height: 100%;
            100%;
            overflow:hidden;
        }

    在此之后,我发现页面的内容出现了。

    当然在解决这个问题的过程中,我和同事商量也找到了一种用于替换iframe的方法,只需要做样式的隔离即可。

    使用ajax方式请求一个div内部内容,这个div内部内容只要不含有<html>,<body><head>这三者即可。

    $.ajax({
                url: '/package/sunglassSkuPanel.html?packageid=' + packageid + "&skuid=" + skuid,
                success: function (html) {
                    var popupHTML = '<div class="popup popup-info-content">' + html + '</div>';
                    $("body").append(popupHTML);
                    GLOBAL['ctrlOverflow'].setHtmlOverflowHidden();
                }
            });
    

     至此,结束

  • 相关阅读:
    1347: Last Digit (周期函数)
    1363: Count 101 (经典数位dp)
    1360: Good Serial Inc.(不知道是什么类型的题)
    C#winForm调用WebService的远程接口
    Web Service 的创建简单编码、发布和部署
    极致精简的webservice集成例子
    SVN使用教程总结
    C# int.Parse()与int.TryParse()
    C# 函数1 (函数的定义)
    C#中的委托和事件
  • 原文地址:https://www.cnblogs.com/sdwrz/p/7200875.html
Copyright © 2020-2023  润新知