easyui 之tab和portal 在IE9下使用iframe时报未定义错误的解决方法

使用easyui的tab和portal控件做的页面，当使用iframe嵌入网页时，在IE8下运行正常，IE9下弹出很多“未定义”错误。

原因：

IE9 throws exceptions when loading scripts in iframe. Why? 

APIs Are Not Available if iFrame Is Removed from DOM Tree

英文的也看不懂，引用一个博文的话就是“在包含iframe的页面中, 如果这个iframe被移除后, 其内部的Javascript和DOM API都会无法被调用.”

处理方法：

1.tabs

初始化options对象，调用layout_center_addFun(opts)方法添加选项卡，默认是没有url属性的，这里的 src=“”

     layout_center_addTabFun({
            title: '首页',
            closable: true,
            url: 'Layout/centerPortal.aspx', //使用iframe时,自定义url属性
            content: '<iframe id="tabIframe" src="" frameborder="0" style="border:0;width:100%;height:99%;"></iframe>'
        });

layout_center_addFun(opts) 方法

   function layout_center_addTabFun(opts) {
        var t = $('#layout_center_tabs');
        if (t.tabs('exists', opts.title)) {
            t.tabs('select', opts.title);
        } else {
            t.tabs('add', opts);
        }
    }

在 tabs的 onAdd事件中给src赋值

   onAdd: function (title, index) {
                //解决IE9下Iframe嵌套未定义问题
                var panel = $('#layout_center_tabs').tabs('getTab', index).panel('panel');
                var opts = $('#layout_center_tabs').tabs('getTab', index).panel('options');
                if (opts.url) {
                    var frame = panel.find('#tabIframe');
                    if (frame.length > 0) {
                        for (var i = 0; i < frame.length; i++) {
                            frame[i].src = opts.url;
                        }
                    }
                }
            },

2.Portal
使用的portal插件  jquery-easyui-portal

定义面板数组,默认panel的options 没有url属性

     panels = [{
                id: 'p6',
                title: '在线用户',
                height: 200,
                collapsible: true,
                url:"Portal/OnlineUser.aspx",
                content: '<iframe id="panelIframe" src="" frameborder="0" style="border:0;width:100%;height:99%;"></iframe>'
            }];

在portal的add方法之后，重设src属性。

  $('#layout_portal_portal').portal('add', {
                                panel: p,
                                columnIndex: columnIndex
                            }); 
                            //根据是否具有url属性判断是不是iframe               
                            if (options.url) {
                                var frame = p.find('#panelIframe');
                                if (frame.length > 0) {
                                    for (var i = 0; i < frame.length; i++) {
                                        frame[i].src = options.url;
                                    }
                                }
                            }

 

这里我给tabs 的 options添加url属性还有另外一个用处，就是在tab页上点击右键时有个功能“在新窗口中打开页面”，就是取的这个url值

 if (type === 'OpenInNewWindow') {

                    var t = $('#layout_center_tabs').tabs('getTab', curTabTitle);
                    if (t.panel('options').url) {
                        window.open(t.panel('options').url, '', '');
                    }
                    return;

                }