iframe 随内容自适应高度

兼容性好的

html代码:

<iframe src="enterprise/enter_edit.aspx" id="mainframe" frameborder="0" name="main"
                        onload="resize()" onreadystatechange="resize()" style="width: 100%; height: 100%;" border="0"></iframe>

JS代码:

<script type="text/javascript">
        //iframe自适应高度的函数
        var oTime = null;
        function resize() {
            if (oTime) {
                clearTimeout(oTime);
            }
            oTime = setTimeout(reset, 0);
        }

        //iframe自适应高度的函数
        function reset() {
            var frame = document.getElementById("mainframe");
            var outHeight = frame.offsetHeight;
            var inHeight = frame.contentWindow.document.body.scrollHeight;
            if (outHeight < inHeight) {
                frame.style.height = (inHeight + 10) + "px";
            } else if (inHeight > 650) {
                frame.style.height = (inHeight + 10) + "px";
            } else {
                frame.style.height = "750px";
            }
        }
    </script>

jquery代码:

<script type="text/javascript">
    //iframe 随内容自适高度
        $("#mainframe").load(function () {
            var mainheight = $(this).contents().find("body").height() + 30;
            $(this).height(mainheight);
        });
    </script>
posted @ 2015-02-05 14:51  平民的麦田  阅读(306)  评论(0编辑  收藏  举报