Iframe高度自适应

最新推荐文章于 2023-02-22 11:20:41 发布

踏平扶桑

最新推荐文章于 2023-02-22 11:20:41 发布

阅读量681

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

头部需要增加上面的这个声明。

<script type="text/javascript">
        var browserVersion = window.navigator.userAgent.toUpperCase();
        var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
        var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
        var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
        var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
        var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
        var isIE9More = (! -[1, ] == false);
        function reinitIframe(iframeId, minHeight) {
            try {
                var iframe = document.getElementById(iframeId);
                var bHeight = 0;
                if (isChrome == false && isSafari == false)
                    bHeight = iframe.contentWindow.document.body.scrollHeight;

                var dHeight = 0;
                if (isFireFox == true)
                    dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
                else if (isIE == false && isOpera == false)
                    dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                else if (isIE == true && isIE9More) {//ie9+
                    var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
                    if (heightDeviation == 0) {
                        bHeight += 3;
                    } else if (heightDeviation != 3) {
                        eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                        bHeight += 3;
                    }
                }
                else//ie[6-8]、OPERA
                    bHeight += 3;

                var height = Math.max(bHeight, dHeight);
                if (height < minHeight) height = minHeight;
                iframe.style.height = height + "px";
            } catch (ex) { document.write(ex); }
        }
        function startInit(iframeId, minHeight) {
            
            eval("window.IE9MoreRealHeight" + iframeId + "=0");
            window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
        }
    </script>

<iframe id="mainFrame" name="mainFrame" scrolling="no" src="http://www.xxx.com/"
            frameborder="0" style="padding: 0px; width: 100%; height: 400px;"></iframe>
        <script type="text/javascript">
            startInit('mainFrame', 460);
        </script>

记住当前页和iframe不能跨域，否则会提示： Uncaught SecurityError : Blocked a frame with origin " http://xxxxx " from accessing a frame with origin " http://xxxxxx ". Protocols, domains, and ports must match.

踏平扶桑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Iframe高度自适应

头部需要增加上面的这个声明。 var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; var isFireFox = browserVersio
复制链接

扫一扫