美文网首页
又一次遇到在iframe下iOS宽度被砍高度被砍的问题

又一次遇到在iframe下iOS宽度被砍高度被砍的问题

作者: 十年一品温如言1008 | 来源:发表于2019-03-01 09:25 被阅读0次

    /**

    * Created by Administrator on 2019-02-28.

    *  兼容iOS  调用init方法  window.onload = init(iframe);

    */

    var u = navigator.userAgent;

    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    // iframe高度自适应

    function changeFrameHeight(ifm) {

    if (isIOS) {

    var cacheHeight =0;

            function run() {

    var mf = ifm[0];

                // when the main frame has already been loaded, the check its height

                if (mf && mf.contentDocument && mf.contentDocument.body) {

    var iframeHeight = ifm[0].contentDocument.body.clientHeight;

                    if (iframeHeight && iframeHeight != cacheHeight) {

    // cache the main frame height

                        cacheHeight = iframeHeight;

                        ifm.height(iframeHeight);

                    }

    }

    setTimeout(run, 200);

            }

    run();

        }else {

    ifm.height = document.documentElement.clientHeight -118;

        }

    }

    /**

    * 初始化

    * @param iframe的id

    */

    function init(iframeId) {

    try {

    var iframe = $("#" + iframeId);

            iframe.css("height", "100%");

            if(isIOS) {

    iframe.attr("scrolling", "no")

    .css("*width", "100%")

    .css("width", "1px")

    .css("min-width", "100%");

            }

    var loadListener =function () {

    changeFrameHeight(iframe);

            };

            if (!iframe.on) {

    iframe.load(loadListener);

            }else {

    iframe.on("load", loadListener);

            }

    }catch (e) {

    console.error(e);

        }

    }

    是用这个方法解决的,这个简书主要是我自己用来记录自己的学习内容,以后方便自己看的。

    相关文章

      网友评论

          本文标题:又一次遇到在iframe下iOS宽度被砍高度被砍的问题

          本文链接:https://www.haomeiwen.com/subject/mvcmeqtx.html