ifram在bootstrap modal中演进的自适应迭代至1.0版本

• 需引入layer.js loading加载遮罩层会被使用到
• 0.1版本显示页面但大小会随机变化。
• 0.2版本内嵌页面与主页面都要js控制,页面有时候不能显示。
• 1.0版本内嵌页面无需写额外js，只需主页面js控制，代码实现了自适应，且显示正常。
• ifram可能会在加载关闭时内存泄漏，此处显式调用ifram clear防止内存泄漏

var Tools = (function ($) {
            var IframeFirstClear = function (iframedom) {
                var ifd = $(iframedom);
                if (ifd.length > 0) {
                    ifd[0].contentWindow.document.write(''); //清空iframe的内容
                    ifd[0].contentWindow.close(); //避免iframe内存泄漏
                    ifd.remove(); //删除iframe
                    console.log('iframe-clean');
                }
            };
            return {
                IFC: IframeFirstClear
            };
        })(jQuery);

Tools.IFC("#EPageIframe");

• 配合bootstrap modal引入ifram自定义插件

 (function ($) {
            $.extend({
                modelshowiframe: function (options) {
                    //面向对象的写法
                    new modeladapt(this, options);
                }
            })
            var modeladapt = function (ele, options) {
                if (options == null)
                    alert("arg error")
                this.element = ele;
                this.options = {
                    labledom: "#EPageIframeModalLabel",
                    labletext: "",
                    iframedom: "#EPageIframe",
                    iframesrc: "",
                    modeldom: "#EPageIframeModal"
                };
                this.options = $.extend({}, this.options, options);
                this.init();
            }
            //初始化对象
            modeladapt.prototype = {
                init: function () {
                    //初始化
                    this.ModelIframe();
                },
                ModelIframe: function () {
                    var that = this;
                    $(that.options.labledom).text(that.options.labletext);
                    $(that.options.modeldom).modal({ show: true, backdrop: "static" });
                    var index = layer.load(0, { shade: false }); //loading层
                    var iframe = document.createElement("iframe");
                    iframe.id = "EPageIframe";
                    iframe.src = that.options.iframesrc;
                    iframe.style.width = "100%";
                    iframe.setAttribute("frameborder", 0);
                    iframe.setAttribute("scrolling", "no");
                    document.getElementById("EPageIframeDiv").appendChild(iframe);
                    console.log('iframe-ready');
                    if (iframe.attachEvent) {
                        $(iframe).load(function () {

                            setTimeout(function () {
                                var heightiframe = iframe.contentWindow.document.documentElement.scrollHeight;
                                iframe.height = heightiframe;
                                console.log('iframe-load-ok-A-' + heightiframe);
                                layer.close(index); //iframe加载完毕  
                            }, 100);
                        });
                    } else {
                        $(iframe).load(function () {

                            setTimeout(function () {
                                var heightiframe = iframe.contentDocument.body.scrollHeight;
                                iframe.height = heightiframe;
                                console.log('iframe-load-ok-B-' + heightiframe);
                                layer.close(index); //iframe加载完毕  
                            }, 100);
                        });
                    }
                }
            }
        })(window.jQuery);
    </script>

• bootstrap modal代码

<div class="modal fade" id="EPageIframeModal">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="EPageIframeModalLabel">消息</h4>
            </div>
            <div class="modal-body" id="EPageIframeDiv" style="clear:both;">
            </div>
        </div>
    </div>
</div>

• 使用指南,主页面使用代码
• labletext 头部名字
• iframesrc 嵌套页面地址

$.modelshowiframe({
                labletext: "测试弹出页面",
                iframesrc: "/AAA/show/" + Id
            });