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=“”

1      layout_center_addTabFun({

2             title: '首页',

3             closable: true,

4             url: 'Layout/centerPortal.aspx', //使用iframe时,自定义url属性

5             content: '<iframe id="tabIframe" src="" frameborder="0" style="border:0;width:100%;height:99%;"></iframe>'

6         });

layout_center_addFun(opts) 方法

1    function layout_center_addTabFun(opts) {

2         var t = $('#layout_center_tabs');

3         if (t.tabs('exists', opts.title)) {

4             t.tabs('select', opts.title);

5         } else {

6             t.tabs('add', opts);

7         }

8     }

在 tabs的 onAdd事件中给src赋值

 1    onAdd: function (title, index) {

 2                 //解决IE9下Iframe嵌套未定义问题

 3                 var panel = $('#layout_center_tabs').tabs('getTab', index).panel('panel');

 4                 var opts = $('#layout_center_tabs').tabs('getTab', index).panel('options');

 5                 if (opts.url) {

 6                     var frame = panel.find('#tabIframe');

 7                     if (frame.length > 0) {

 8                         for (var i = 0; i < frame.length; i++) {

 9                             frame[i].src = opts.url;

10                         }

11                     }

12                 }

13             },

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

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

1      panels = [{

2                 id: 'p6',

3                 title: '在线用户',

4                 height: 200,

5                 collapsible: true,

6                 url:"Portal/OnlineUser.aspx",

7                 content: '<iframe id="panelIframe" src="" frameborder="0" style="border:0;width:100%;height:99%;"></iframe>'

8             }];

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

 1   $('#layout_portal_portal').portal('add', {

 2                                 panel: p,

 3                                 columnIndex: columnIndex

 4                             }); 

 5                             //根据是否具有url属性判断是不是iframe               

 6                             if (options.url) {

 7                                 var frame = p.find('#panelIframe');

 8                                 if (frame.length > 0) {

 9                                     for (var i = 0; i < frame.length; i++) {

10                                         frame[i].src = options.url;

11                                     }

12                                 }

13                             }

 

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

1  if (type === 'OpenInNewWindow') {

2 

3                     var t = $('#layout_center_tabs').tabs('getTab', curTabTitle);

4                     if (t.panel('options').url) {

5                         window.open(t.panel('options').url, '', '');

6                     }

7                     return;

8 

9                 }