• 移动端使用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();
                }
            });
    

     至此,结束

  • 相关阅读:
    [转]C#获取程序当前路径的方法
    [解决办法]未在本地计算机上注册“Mircosoft.Jet.OleDB.4.0”提供程序
    [解决办法]正在尝试使用已关闭或释放并且不再有效的 SPWeb 对象
    PowerShell学习笔记
    DNS
    在C#编程中,如何将Excel保存为2003的格式
    SAAS相关网络资源
    LCID及Culture Name列表
    Microsoft's naming conventions (微软命名规范)
    C#中如何结束Excel (Office)进程
  • 原文地址:https://www.cnblogs.com/sdwrz/p/7200875.html
Copyright © 2020-2023  润新知