【已解决】js中的createWindow的用法和获取对应的关闭窗口的事件

【背景】

折腾：

【规避解决】KindEditor第二次加载时无法加载已有html内容

期间，需要去搞懂：

js中的createWindow是如何使用的，语法如何

以及关闭窗口时候对应的事件是什么->便于后期加入销毁kindeditor的代码

【折腾过程】

1.先去搞懂：

createWindow(contextId, '修改团购描述',  700, 500, 'view/store/form/goodsdetaileditform.html');

的具体含义。

搜：

js createWindow

参考：

createWindow method

Basic Example to switch windows » Community Questions & Answers » Appcelerator Developer Center

javascript – jsdom document.createWindow() returns empty for non-empty document – Stack Overflow

inside createWindow.url file, can’t use add method to createWindow » Community Questions & Answers » Appcelerator Developer Center

结果都找不到具体的解释

2.突然想到，难道

createWindow不是纯js的函数，而是Jquery或者是easyUI的函数？

搜

easyui createwindow

JQuery createwindow

createwindow

还是没有找到真正的对应的函数。

3.在整个项目的代码中搜：

createWindow

结果：

才找到自己内部文件：

index.jsp

的函数：

  function createWindow(contextId, title, width, height, url){
   var win = 'win'+$.now();
   cur_open_windowId = '#'+win;
   
   $(contextId).empty();
   $(contextId).append('<div id="'+win+'" style="text-align:center;margin:0 auto; vertical-align:middle; display: table-cell; "></div>');
   $(cur_open_windowId).window({
    width:width,
    height:height,
    collapsible:false,
    minimizable:false,
    maximizable:false,
    title:title,
    modal:true
   });
   $(cur_open_windowId).window('refresh', url);
  }

至此才明白：

原来此处的createWindow是自己项目内部自己写的函数啊。。。（不是我写的。）

4.接着继续去研究，如何获得窗口关闭时候的事件。

看到对应代码中有调用window，所以去搜：

easyUI window

参考：

JQuery EasyUI window 用法 – 摩根船长 – 博客园

window – Documentation – jQuery EasyUI

看到了很多的函数，比如：

• onBeforeClose
• onClose
• onBeforeDestroy
• onDestroy

等等函数，就是我此处所想要的了。

其他还有很多对应的事件：

• onLoad
• onBeforeOpen
• onOpen

5.对应的窗口关闭事件，对应动作是：

  <div style="text-align:center;padding-bottom: 10px;">
   <a href="javascript:void(0)" class="easyui-linkbutton" style="width: 100px;" onclick="$(cur_open_windowId).window('close')">关闭</a>
  </div>

对应的事件，则是参考了：

KindEditor 销毁与自动高度冲突解决 – 皓月青峰 – 博客园

应该是：

   $(cur_open_windowId).window({
    width:width,
    height:height,
    collapsible:false,
    minimizable:false,
    maximizable:false,
    title:title,
    cache: false,
    modal:true,
               
                onBeforeClose: function () {
                    KindEditor.remove('textarea[name="Contents"]');  //当窗口关闭前销毁KindEditor
                }
   });
   $(cur_open_windowId).window('refresh', url);

【总结】

关于easyUI的window，实际上是JQuery的window控件，其属性和基本的用法，可以参考官网的：

window – Documentation – jQuery EasyUI

而关于窗口关闭（和销毁）的事件是：

• onBeforeClose
• onClose
• onBeforeDestroy
• onDestroy

具体的写法就是：

$("#window_id").window({
    width:width,
    height:height,
    ......
    ,
    onBeforeClose: function () {
        //add code here, do what you want
    }
});

其他的更多的函数和属性，可以参考：

JQuery EasyUI window 用法 – 摩根船长 – 博客园

转载请注明：在路上 » 【已解决】js中的createWindow的用法和获取对应的关闭窗口的事件