iframe 根据内容调整高度

最近在最tab页标签，准备用jquery-ui的tabs，但要链接到完整的html页面，jquery-ui的tabs是用div包装了内容，对于是一个完整的html会出现js冲突或不生效的问题，还是在div中添加一个irame 用iframe来显示，但iframe不像div会自动调整高度，但可以根据所加载的内容的高度，在iframe加载完成时，设置高度

 

    function showTab(id){
        var iframe = document.createElement("iframe");
        iframe.src = $("#"+id).attr("url");
        iframe.width="100%";
        iframe.height="500px";
        iframe.setAttribute("frameborder","0");
        iframe.setAttribute("marginwidth","0px");
        iframe.setAttribute("marginheight","0px");
        if (iframe.attachEvent){//IE
            iframe.attachEvent("onload", function(){
                //调整高度
                   iframe.height = $(iframe).contents().find("body").height() + 50;
            });
        }else{//其他浏览器
            iframe.onload = function(){
                iframe.height = $(iframe).contents().find("body").height() + 50;
            };
        }    
        $("#"+id).append(iframe);
    }

 

转载于:https://www.cnblogs.com/xuruhong/p/3431526.html