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

2019-03-01  本文已影响0人  十年一品温如言1008

/**

* 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);

    }

}

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

上一篇下一篇

猜你喜欢

热点阅读