iframe 页面框架

iframe 页面框架

这是一篇技术博客的连接

使用 iframe 框架可以在一个页面中嵌套另一个页面， 从而使页面得到重用； 在需要导入页面的地方标签如下：

<!-- 右边 -->
            <div class="right-side">
                <iframe src="iframe/workOrderManagement.jsp" frameborder="0"
                    width="100%" height="100%" scrolling="no" id="mainFrame"
                    name="mainFrame"></iframe>
            </div>

点击一个连接改变子网页的页面， 标签内容如下：

<a href="iframe/station.html" target="mainFrame" >分机数</a>

在js 中如果需要导入父网页面里面js 的方法，可以使用 parent ；

使用iframe 框架最大的问题是 子网页自适应高度的调整：

<!-- 子网页自适应高度 -->
    <script type="text/javascript">
        var browserVersion = window.navigator.userAgent.toUpperCase();
        var isOpera = false, isFireFox = false, isChrome = false, isSafari = false, isIE = 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 && !-[ 1, ] == false) {
                } //ie9+
                else
                    bHeight += 3;

                var height = Math.max(bHeight, dHeight);
                if (height < minHeight)
                    height = minHeight;
                iframe.style.height = height + "px";
            } catch (ex) {
            }
        }
        function startInit(iframeId, minHeight) {
            isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
            isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
            isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
            isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
            if (!!window.ActiveXObject || "ActiveXObject" in window)
                isIE = true;
            window.setInterval("reinitIframe('" + iframeId + "'," + minHeight
                    + ")", 500);
        }

        startInit('mainFrame', 500);
    </script>

子网页中的模态框的位置问题（无法显示在屏幕中央)， 可以通过获取父框架中的 滚动条高度，设置 模态框位置，获取父框架滚动条顶部的方法：

/*获取父框架的滚动条高度*/
function getParentScrollHeight(){
    var scrollTop = window.parent.document.documentElement.scrollTop;
    if(scrollTop==0) 
    {
        scrollTop = window.parent.document.body.scrollTop;
    }
    return scrollTop;
}