iframe自适应宽高解决,兼容所有浏览器

作者:Jasmine - 2017年09月12日
<iframe src="test.html" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="IframeLoadEND();"  ></iframe>
 // 定义一个函数,定时调用并刷新iframe高度----本地测试谷歌高度不行
    function reinitIframe(){
        var iframe = document.getElementById("iframepage");
        try{
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            var height = Math.max(bHeight, dHeight);
            iframe.height = height;
        }catch (ex){}
    }

    var timer1 = window.setInterval("reinitIframe()", 500); //定时调用开始

    //完毕后干掉定时器
    function IframeLoadEND(){
        var iframe = document.getElementById("iframepage");
        try{
            window.clearInterval(timer1);
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            var height = Math.max(bHeight, dHeight);
            iframe.height = height;
        }catch (ex){}
        // 停止定时
        window.clearInterval(timer1);

    }

如果你用谷歌浏览器看,需要配置个环境 如IIS,得在环境下运行才能看到效果。本地测试谷歌高度不行,大部分人说不能完全兼容都是这个问题。网站找到的那些全部都是谷歌不兼容的,这个可以兼容,但是要配置服务器环境下运行.如果你有更好的解决方法可以提出来喔~~欢迎提问



本文作者: Jasmine

本文链接: https://www.jianbaizhan.com/article/573

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!