Iframe 在项目中的使用总结

参考：http://www.cnblogs.com/MaxIE/archive/2008/08/13/1266597.html

问题一：首先我们用iframe加载页面,第一个需要解决的问题是高度自适应的问题,有2个方法

第一个是：

<iframeid="iFramebox" name="iFramebox" width="100%"onload="this.height=iFramebox.document.body.scrollHeight"  frameborder="0"scrolling="no"  src='/templates/106/ + url + '?id=' +taskid + '></iframe>

这里需要加载的页面的url地址是url + '?id=' + tasked

第二个方法 ：

/* 设置iframe高度自适应 */

        var _iframe = $("#contentContainer> iframe");

        if (_iframe[0].attachEvent) {    //attachEvent是IE的监听器

           _iframe[0].attachEvent("onload", function () {

                //iframe页面加载完成后，你需要写的code

SetIframeHeight(_iframe);

            });

        } else {

            _iframe[0].onload = function () {

                       //iframe页面加载完成后，你需要写的code

                SetIframeHeight(_iframe);

            };

        }

        function SetIframeHeight(iframe) {

            _iframe.height(document.frames ?_iframe[0].document.body.scrollHeight :_iframe[0].contentDocument.body.scrollHeight);

        }

 获取iframe 的高度仅作参考：

function reinitIframe(){var iframe = document.getElementById("frame_content");
    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){}
    }
    window.setInterval("reinitIframe()", 200);

问题二：

如果iframe加载了某一个页面 a , 但是a 页面又重新指向到了b页面，那iframe如何自动跳转到新页面b呢 ？

这种情况需要用到异步加载获取新地址,也介绍2种方法：

方法一：

$.get(url +'?id=' + taskid, function (data) {

        $iframeBox.attr("src", data);

});

说明： url为取得的a页面的地址，data为新指向的b页面的地址，然后把之前页面中的iframe的src地址进行修改，$iframeBox.attr("src",data)

方法二：也是用异步的方式，传递A 页面的url，type设置为”GET”,

$.ajax({

        url: url + '?id=' + taskid,

        async: false,

        type: "GET",

        data: "",

        success: function (data) {

            $iframeBox.attr("src",data);

        }

    });

问题三：当iframe页面加载完成后，如果我需要对 iframe进来的页面里的标签引用并做一些必要的事情的时候，该如何处理呢？（如何实现在iFrame加载相应的aspx 完成后再操作contentDocument中的元素）

因为通过iframe引进来的页面是个独立的页面，在我们的页面中我们只能引用iframe标签，不能引用到iframe标签里面的任何标签，假如被iframe引入进来的页面里有个id为divHidden的标签，只能通过

$("#divHidden", $("iframe")[0].contentDocument);来获取，contentDocument属性以HTML对象返回框架容纳的文档，可以通过所有标准的DOM方法来处理被返回的对象。

这一部分的完成代码为：

/* load taskinformation {加¨?载?task的ì?详¨o细?信?息?é}   */

 

functionloadInformation(url, taskid) {

 

    $("#loadingInfo").show();

    var $iframeBox = $('<iframeid="iFramebox" name="iFramebox" width="100%"onload="this.height=iFramebox.document.body.scrollHeight" frameborder="0"scrolling="no" src='/templates/106/ + url + '?id=' + taskid +'></iframe>');

   $iframeBox.appendTo($("#serviceTogerther"));

 

    $.ajax({

        url: url + '?id=' + taskid,

        async: false,

        type: "GET",

        data: "",

        success: function (data) {

            $iframeBox.attr("src",data);

        }

    });

 

       var _iframe = $iframeBox;

        if (_iframe[0].attachEvent) {

           _iframe[0].attachEvent("onload", function () {

                getHiddenField();

                SetIframeHeight(_iframe);

            });

        } else {

        _iframe[0].onload = function () {

            getHiddenField();

            SetIframeHeight(_iframe);

        };

    }

 

    function SetIframeHeight(iframe) {

        _iframe.height(document.frames ?_iframe[0].document.body.scrollHeight :_iframe[0].contentDocument.body.scrollHeight);

    }

 

    function getHiddenField() {

        $("#loadingInfo").hide();

        var $hiddenInput = $("#divHiddeninput", $("iframe")[0].contentDocument);

        var $StatusInput =$("#StatusButton").find("input");

        var $hotlinks =$("#TaskDetailQuickLink .serviceHotLink .Links");

 

        var sb = $hiddenInput.eq(0).val();

        var fb = $hiddenInput.eq(1).val();

        var cb = $hiddenInput.eq(2).val();

 

        if (sb == 0) {$StatusInput.first().attr("disabled", "disabled"); } else {$StatusInput.first().removeAttr("disabled"); }

        if (fb == 0) {$StatusInput.eq(2).attr("disabled", "disabled"); } else {$StatusInput.eq(2).removeAttr("disabled"); }

        if (cb == 0) {$StatusInput.last().attr("disabled", "disabled"); } else {$StatusInput.last().removeAttr("disabled"); }

 

       $StatusInput.eq(1).removeAttr("disabled");

        /* Get the hot link number */

        $hotlinks.html("");

       $(".branding-tagline-normal,.branding-tagline-special",$("iframe")[0].contentDocument).each(function () {

 

            var title = $(this).text();

 

            $hotlinks.append('<ahref="javascript:void(0);">' + title + '</a>');

 

        });

 

        if($.trim($hotlinks.find("a").last().text()) != "Comment") {

            $hotlinks.append('<ahref="javascript:void(0);"> Comment </a>');

        }

 

    }

 

 

    /*

    $.get(url + '?id=' + taskid, function(data) {

 

        $iframeBox.attr("src", data);

 

       

    });

    */

    $(".serviceHotLink").show();

             

        

}