zoukankan      html  css  js  c++  java
  • 移动端使用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();
                }
            });
    

     至此,结束

  • 相关阅读:
    Mybatis分页插件
    Mybatis代码自动生成
    Spring-Mybatis依赖
    Spring-test单元测试
    Spring-json依赖
    Spring-MVC依赖
    Log4j日志依赖
    Spring数据库连接池依赖
    Spring-JDBC依赖
    Spring依赖
  • 原文地址:https://www.cnblogs.com/sdwrz/p/7200875.html
Copyright © 2011-2022 走看看